求大牛指点，如何用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>

...全文

157 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后台管理模板一款逆天超级牛B的Jquery-UI后台管理模板