单击链接时关闭模式
单击链接时关闭模式
提问于 2014-03-08 23:11:36
我在我的网站上使用了一种模式覆盖，当点击缩略图时可以显示全尺寸的图像。
这是我的JS：
$(".mix.photos").on("click", function(){
var img = $(this).children("img").data("imagefull");
$("#modal_inner").html("<img src='"+img+"' />");
$("#modal_inner").fadeIn();
}).mix.photos是我的包含img的div。单击.mix.photos时，它会打开我的#modal_inner，其中会显示var img。(全尺寸图像的src在我的.data("imagefull")中)。它工作得很好，但我正在尝试添加一个链接，以便在单击#modal_inner时关闭它。
这是我的CSS：
#modal_inner{
width: 847px;
height: 374px;
position: absolute;
top: 0px;
left: 0px;
padding-left: 120px;
background-color:rgba(187, 187, 187, 0.8);
display: none;
padding-top: 10px;
z-index: 1000;}和我的HTML：
<div id="modal_inner">
<div id="modal_close">CLOSE</div>
</div>有人能帮我吗？
非常感谢
回答 3
Stack Overflow用户
发布于 2014-03-08 23:16:27
您应该能够使用以下代码：
//if you want the modal to close when clicking on the modal itself:
$("#modal_inner").on("click", function(){
$(this).fadeOut();
});
//if you want the modal to close when clicking on the close button ie <div id="modal_close">CLOSE</div>:
$("#modal_close").on("click", function(){
$("#modal_inner").fadeOut();
});您可以添加指向html标记的链接。
<div id="modal_inner">
<div id="modal_close">CLOSE</div>
<a href="javascript:void(0);">My Link to Close the modal</a>
</div>然后执行以下操作：
$("#modal_inner a").on("click", function(){
$("#modal_inner").fadeOut();
});Stack Overflow用户
发布于 2014-03-08 23:16:31
尝尝这个。
添加关闭按钮的步骤
$(".mix.photos").on("click", function(){
var img = $(this).children("img").data("imagefull");
$("#modal_inner").html("<img src='"+img+"' />");
$("#modal_inner").fadeIn();
$('<div id="modal_close">CLOSE</div>').appendTo('#modal_inner');
});关闭函数
$(document).on('click','#modal_close',function(){
$('#modal_inner').empty().fadeOut();
})Stack Overflow用户
发布于 2014-03-08 23:26:59
像这样的东西将会起作用：
$(".mix.photos").on("click", function () {
var img = $(this).children("img").data("imagefull");
$modal = $("#modal_inner").find('.image').html("<img src='" + img + "' />").end()
.fadeIn(function() {
var self = this;
$(this).on('click', '#modal_close', function() {
$modal.off().hide();
});
});
});您也可以将close事件委托给document对象，但我不希望即使在overlay被隐藏时也检查所有的点击。
演示：http://jsfiddle.net/PG2Z8/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22271026
复制相关文章
相似问题
腾讯云开发者
