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

Posted 2021-04-04

我使用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外部创建一个按钮。

答案

关闭按钮需要两件事：

option: closeButton: true

默认情况下，此选项是true ...在OP（原始帖子）中，它明确设置为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: Button Needs to be in the Modal

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

---

Fiddle

演示

/* 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>

以上是关于如何在iFrame中添加原始关闭按钮？的主要内容，如果未能解决你的问题，请参考以下文章

如何从同一片段中的关闭按钮关闭片段？

求助：js,如何关闭IFRAME的父窗口

如何在地图片段 API v2 布局顶部添加按钮

如何将按钮功能添加到片段中

jq 在iframe中点击按钮,父元素触发事件

如何在 HTML 中单击按钮时更改 iframe 源？