使用CSS和JavaScript創(chuàng)建模態(tài)彈出框該怎么辦？
網(wǎng)友解答: 這個簡單，給你一段簡單的示例代碼，你可以參考下：html+css部分：JavaScript部分：運行效果代碼也給你放上來，你自己復(fù)制過去運行看效果吧<!DOCTYPE
這個簡單，給你一段簡單的示例代碼，你可以參考下：
html+css部分：JavaScript部分：運行效果代碼也給你放上來，你自己復(fù)制過去運行看效果吧
<!DOCTYPE html
<html
<head
<meta charset="utf-8" /
<title模態(tài)對話框demo</title
<style type="text/css"
body,html{margin: 0px;padding: 0px;}
div.dialog{width: 500px;height: 300px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;
background:white;top: 50%;margin-left: -250px;left: 50%;margin-top: -150px;position: relative;box-sizing: border-box;}
#container{width: 100%;height: 100%;position: fixed;filter: alpha(opacity=50);
background-color: rgba(0,0,0,.5);left: 0px;top: 0px;display: none;}
#close_btn{font: bold 28px/30px "microsoft yahei";color: darkgrey;float:right;margin-right: 5px;cursor: pointer;}
#open_diaog{border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;height: 50px;width: 150px;border: 0px;
background: deepskyblue;font: bold 6px/21px "microsoft yahei";cursor: pointer;}
</style
</head
<body
<button id="open_diaog"打開模態(tài)對話框</button
<div id="container"
<div class="dialog"
<span id="close_btn" title="關(guān)閉"×</span
<h1我是模態(tài)對話框</h1
</div
</div
<script type="text/javascript"
(function(){
var close_btn = document.querySelector('#close_btn');
var open_diaog = document.querySelector('#open_diaog')
close_btn.onmousemove = function(){
this.style.color = 'red';
}
close_btn.onmouseout = function(){
this.style.color = 'darkgrey';
}
close_btn.onclick = function(){
document.querySelector('#container').style.display = 'none';
}
open_diaog.onclick = function(){
document.querySelector('#container').style.display = 'block';
}
}())
</script
</body
</html
有問題記得追問我，覺得不錯的點個贊，蟹蟹支持。