求大牛指点，如何用jquery动态创建模态层，并在页面上点击任意位置删除模态层

林深见鹿 2017-04-14 10:48:50

如何用jquery动态创建模态层，并在页面上点击任意位置删除模态层
这是我的代码，不知道下面怎么写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.8.3.min.js"></script>
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;

}
.box{
width: 100px;
height: 100px;
background: #7e7e7e;
}
.modal{
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.3);
top:0;
left:0;
}
.on{
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 150px;
margin-left: -150px;
margin-top: -100px;
background: #FFFFFF;
}
p{
font-size: 18px;
height: 50px;
line-height: 50px;
text-align:center;
}
button{
width: 100px;
height: 50px;
margin-left: 75px;
margin-top: 10px;
}
</style>
</head>
<body>

<div class="box"></div>

</body>

<script>
var $modal = $(
'<div class="modal">'+
'<div class="on">'+
'<p class="pic">图片不清晰</p>'+
'<button>关闭</button>'+
'</div>'+
'</div>'
);

$('.box').click(
function(){
$('body').append($modal);
});
</script>
</html>

...全文

164 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

林深见鹿 2017-04-14

打赏
举报

谢谢啦，受教了

天际的海浪 2017-04-14

打赏
举报


$('.box').click(function(event){
	$('body').append($modal);
	event.stopPropagation();
});

$(document).click(function(event){
	$modal.remove()
});

天际的海浪 2017-04-14

打赏
举报

$(document).click(function(event){ $modal.remove() });

cn00439805 2017-04-14

打赏
举报


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;

        }
        .box{
            width: 100px;
            height: 100px;
            background: #7e7e7e;
        }
        .modal{
			display:none;
            width: 100%;
            height: 100%;
            position: fixed;
            background: rgba(0,0,0,.3);
            top:0;
            left:0;
        }
        .on{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 250px;
            height: 150px;
            margin-left: -150px;
            margin-top: -100px;
            background: #FFFFFF;
        }
        p{
            font-size: 18px;
            height: 50px;
            line-height: 50px;
            text-align:center;
        }
        button{
            width: 100px;
            height: 50px;
            margin-left: 75px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
<script>
    var $modal = $(
        '<div class="modal">'+
        '<div class="on">'+
        '<p class="pic">图片不清晰</p>'+
        '<button>关闭</button>'+
        '</div>'+
        '</div>'
    );
	$('body').append($modal);
	$("body").click(function(e){
		if(e.target === $('.box').get(0)){return;}
		$modal.hide();
	});
    $('.box').click(function(){
		$modal.show();
	});
</script>
</html>

这款“逆天超级牛B的jQuery-UI后台管理模板”在设计时，充分考虑了后台管理的特性，整合了上述组件，同时可能还包含以下特色： 1. **响应式设计**：适应不同设备的屏幕大小，确保在桌面和移动设备上都能良好运行。 ...

18.jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19.jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20.jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21.jquery定时自动切换banner...

使用`jquery-confirm`的方法很简单，首先需要在页面中引入jQuery库和`jquery-confirm`的CSS和JS文件，然后通过jQuery选择器调用`.confirm()`方法，即可创建一个确认对话框。例如： ```html <!DOCTYPE html> ...

"我的最牛代码"这一项目显然展示了JavaScript的强大功能，特别是在动态展示页面内容、图片处理以及用户交互方面。接下来，我们将深入探讨这些知识点。首先，动态展示页面内容是现代Web应用的核心特性之一。...

此外，为了实现类似模态窗口的行为，在弹出层弹出时，可以监听body的keyup事件，并对聚焦到弹出层内的第一个按钮执行点击操作，这样无论按钮是否有焦点都可以被激发。代码示例如下： ```javascript $('body').live('...