[英]How to disable all clicks outside jquery modal dialog?
On my page there is a modal dialog which loads a site into iframe on click of a link. 在我的页面上有一个模式对话框,单击链接即可将网站加载到iframe中。 Here is the Jquery: 这是Jquery:
$(function () {
$('.open-dialog').click(function () {
$('#win-dialog').show().find('#iframeContainer').html('<iframe src="' + this.href + '"> </iframe>');
$('#dialog-overlay').fadeTo(400, 0.8);
return false;
});
$('#win-dialog .close').click(function () {
$('#win-dialog').fadeOut('normal', function () {
$('iframe', this).remove();
});
$('#dialog-overlay').hide();
return false;
});
});
And here is the HTML 这是HTML
<div id='win-dialog'>
<h3 class='title'><a class='close' href='#'>&times;</a></h3>
<div class='isi-dialog'>
<div id='iframeContainer'/>
</div>
</div>
<div id='dialog-overlay'/>
<p> <a class='open-dialog' href='http://google.com'>Click here to open dialog</a> </p>
As the question says, I want to disable all clicks outside the modal dialog just like javascript default alert popup does. 如问题所述,我想禁用模式对话框之外的所有点击,就像javascript默认警报弹出窗口一样。 How can i get it. 我怎么才能得到它。 Please help me. 请帮我。
If you have a properly set overlay div, this will capture the clicks and nothing will happen. 如果您有一个正确设置的重叠div,它将捕获点击次数,并且不会发生任何事情。 It seems you have it. 看来你有。
Hope this helps, cheers 希望这会有所帮助,欢呼
In css make height:100%, width:100%; 在css中,使高度:100%,宽度:100%; of dialog-overlay 对话框覆盖图
.dialog-overlay{
height:100%;
width:100%;
position:fixed;
top:0px;
left:0px;
}
With the above code dialog-overlay will be placed at top the page and with width&height 100%; 使用上面的代码,对话框的叠加层将放置在页面的顶部,宽度和高度为100%;
In case you don't want 100% height & width 如果您不想100%的高度和宽度
<div class='outer>
<div class='dialog-overlay'><!-- your div -->
.
. <!-- Content -->
</div>
</div>
In css make 在css中
.outer{
position:fixed;
height:100%;
width:100%;
top:0px;
left:0px;
}
.dialog-overlay{ /* adjust according to your requriement */
top:35%;
left:40%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.