javascript、html5、css3自定义弹出窗口

来源：倪彼情感

本文主要为大家详细介绍了javascript+html5+css3自定义弹出窗口效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

效果图：

源码：

1.demo.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>自定义弹出窗口</title>
 <script type="text/javascript" src="js/myLayer.js"></script>
 <style type="text/css">
 button{
 width: 50px;
 height: 50px;
 border: 1px solid blue;
 background-color: blue;
 color: red;
 border-radius: 5px;
 -webkit-box-shadow: 2px 2px 2px gray;
 -moz-box-shadow: 2px 2px 2px gray ;
 box-shadow: 2px 2px 2px gray ;
 }
 button:hover{
 background-color: green;
 cursor: pointer;
 }
 </style>
 <script type="text/javascript">
 function openWindow() {
 new MyLayer({
 top:"10%",
 left:"10%",
 width:"80%",
 height:"80%",
 title:"我的标题",
 content:"操作成功"
 }).openLayer();
 }
 </script>
</head>
<body>
 <button type="button" onclick="openWindow()">打开弹窗</button>
</body>
</html>

2.myLayer.js