我使用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');
});
$(document).on('opened', '#modal', function(clsbtn) {
var clsbtn = $('<button>').addClass('clsbtn');
$(this).before(clsbtn);
})
如果我关闭iFrame,它将永远显示。
另外,这将在iFrame外部创建一个按钮。
答案 0 :(得分:0)
关闭按钮需要两件事:
closeButton: true
此选项默认为true
...在OP( O 原始 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 | ...
<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>