|
|
@@ -0,0 +1,95 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ #container {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ #under {
|
|
|
+ width: 80%;
|
|
|
+ height: 500px;
|
|
|
+ margin: 50px auto;
|
|
|
+ background-color: pink;
|
|
|
+ }
|
|
|
+ #dialog {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: rgba(0,0,0,.3);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ #tips {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ background-color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ top: 100px;
|
|
|
+ left: 10%;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ #tips #main {
|
|
|
+ width: 100%;
|
|
|
+ height: 180px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 180px;
|
|
|
+ }
|
|
|
+ #tips #btn {
|
|
|
+ width: 100px;
|
|
|
+ height: 50px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ margin: 0 auto;
|
|
|
+ background-color: #00f;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="container">
|
|
|
+ <div id="under"></div>
|
|
|
+ <div id="tips">
|
|
|
+ <div id="main">弹出层</div>
|
|
|
+ <div id="close">
|
|
|
+ <div id="btn">关闭</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="dialog"></div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ var btn = document.getElementById("btn");
|
|
|
+ var dialog = document.getElementById("dialog");
|
|
|
+ var under = document.getElementById("under");
|
|
|
+ btn.onclick = function() {
|
|
|
+ document.getElementById("tips").style.display = "none";
|
|
|
+ dialog.style.display = "none";
|
|
|
+ // alert("弹出")
|
|
|
+ console.log("222")
|
|
|
+ }
|
|
|
+ under.onclick = function() {
|
|
|
+ // alert("弹出")
|
|
|
+ console.log("111")
|
|
|
+ }
|
|
|
+ // btn.ontouchstart = function() {
|
|
|
+ // document.getElementById("tips").style.display = "none";
|
|
|
+ // dialog.style.display = "none";
|
|
|
+ // // alert("弹出")
|
|
|
+ // console.log("222")
|
|
|
+ // }
|
|
|
+ // under.ontouchstart = function() {
|
|
|
+ // // alert("弹出")
|
|
|
+ // console.log("111")
|
|
|
+ // }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
e