时间戳

首页 > 解决方案 > 如何在 iFrame 中添加原始关闭按钮？

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

问题描述

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

标签： javascriptjqueryhtmliframe

解决方案

关闭按钮需要做两件事：

选项：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：按钮需要在模态中

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

推荐阅读