如何在iFrame中添加原始的关闭按钮？

Question

我使用jQuery模态窗口插件： iziModal 。
我已经实现了iFrame，当我单击特定位置时，该框架就会显示出来。

---

我想做的事

当iFrame打开时，我想要一个关闭按钮。
但是我想做一个原始的关闭按钮。 像这样：

---

码

jQuery的

$(document).on('click', '.item1', function (event) {
  $(".item1").click(function (event) {
    event.preventDefault();
    $("#iframe").iziModal('open');
    $('#modal').iziModal('open', {
      iframeURL: $(this).data('href')
    });
  });
  $("#modal").iziModal({
    iframe: true,
    width: '98%',
    iframeHeight: 650,
    zindex: '110',
    iframeURL: "data.html",
    group: 'works',
    overlayColor: 'rgba(0,0,0,0.1)',
    closeButton: false
  });
  $(".item1").off('click');
});

JSFiddle

---

我尝试了什么

$(document).on('opened', '#modal', function(clsbtn) {
  var clsbtn = $('<button>').addClass('clsbtn');
  $(this).before(clsbtn);
})

如果我关闭iFrame，它将永远显示。
另外，这将在iFrame外部创建一个按钮。

Answer 1

关闭按钮需要两件事：

选项： closeButton: true

此选项默认为true ...在OP（O riginal P OST）它明确设置为false ....？

  $("#modal").iziModal({ iframe: true, width: '98%', iframeHeight: 300, zindex: '110', iframeURL: "https://css-tricks.com/", group: 'works', overlayColor: 'rgba(0,0,0,0.1)', closeButton: true //========== closeButton ======================| ADDED | ... 

---

HTML：按钮需要在模式中

 <div id="modal"> <button data-izimodal-close="">Close</button> <!========| ADDED |=====--> </div> 

---

小提琴

演示版

 /* iziModal */ $(document).on('click', '.item1', function(event) { $(".item1").click(function(event) { event.preventDefault(); $('#iframe').iziModal('open'); $('#modal').iziModal('open', { iframeURL: $(this).data('href') }); }); $("#modal").iziModal({ iframe: true, width: '98%', iframeHeight: 300, zindex: '110', iframeURL: "https://css-tricks.com/", group: 'works', overlayColor: 'rgba(0,0,0,0.1)', closeButton: true //====================| ADDED | }); $(".item1").off('click'); }); 

 html { font-size: 62.5%; } .list { display: grid; grid-template-columns: 1fr; } #items { display: grid; grid-gap: 3.8rem 4.6rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .item { text-align: center; } .item img { width: 100%; height: auto; } .item h2 { font-size: 1.6rem; margin-top: 1.6rem; margin-bottom: 1.5rem; } .item p { font-size: 1.5rem; margin-bottom: 0.8rem; } .item h2, .item p { text-align: left; } 

 <link href='https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.css' rel='stylesheet'> <!-- Please click on the title1 section. iFrame opens. --> <div class="list"> <div id="items"> <section class="item item1" data-izimodal-iframeurl="https://css-tricks.com/" data-izimodal-open=#modal data-href="/iframe_url1"> <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="1" /> <h2>title1</h2> <p>description1 description1</p> </section> <section class="item item2" data-izimodal-iframeurl="data-2.html" data-izimodal-open=#modal data-href="/iframe_url2"> <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="2" /> <h2>title2</h2> <p>description2 description2</p> </section> <section class="item item3" data-izimodal-iframeurl="data-3.html" data-izimodal-open=#modal data-href="/iframe_url3"> <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="3" /> <h2>title3</h2> <p>description3 description3</p> </section> <section class="item item4" data-izimodal-iframeurl="data-4.html" data-izimodal-open=#modal data-href="/iframe_url4"> <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="4" /> <h2>title4</h2> <p>description4 description4</p> </section> <section class="item item5" data-izimodal-iframeurl="data-5.html" data-izimodal-open=#modal data-href="/iframe_url5"> <img src="https://placehold.jp/1219a3/1219a3/170x120.png" alt="5" /> <h2>title5</h2> <p>description5 description5</p> </section> </div> </div> <div id="modal"> <!--========================================| ADDED |--> <button data-izimodal-close="">Close</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.js'></script>