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

来源：动视网责编：小OO 时间：2020-11-27 20:07:51

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；} <。

推荐度：

点击下载本文 文档为doc格式

导读效果图。源码。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；} <。

本文主要为大家详细介绍了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

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

推荐度：

点击下载本文 文档为doc格式

标签：自定义窗口 js

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐