使用CSS和JavaScript创建模态弹出框该怎么办_CSS学习

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 1:46:43 共计：3582 浏览

使用CSS和JavaScript创建模态弹出框该怎么办？

这个简单，给你一段简单的示例代码，你可以参考下：

html+css部分：JavaScript部分：运行效果

代码也给你放上来，你自己复制过去运行看效果吧

<!DOCTYPE html>

<html>

<head>

<title>模态对话框demo</title>

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">打开模态对话框</button>

<h1>我是模态对话框</h1>

</div>

(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>

有问题记得追问我，觉得不错的点个赞，蟹蟹支持。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。