移动端的浏览器的缩放重置
基本静态结构、样式搭建
js开发阶段
--参数配置
--结构搭建
--事件绑定
通过一个购物车操作的例子应用一下
效果有以下：
没有传递任何参数(手动关闭)
弹出一个不带任何按钮，且是警告的框，并且两秒后自动关闭
弹出一个有确认和取消按钮的成功框，点击按钮直接关闭
弹出一个有确认按钮的警告框，点击按钮不关闭
弹出一个多组合的按钮组 且按钮样式可以定制
弹出一个有确认和删除的框，点击确认弹出加载框2米秒自动关闭，点击删除按钮把上一次框关闭
首先创建以下文件
index.js
inex.css
index.html
页面重置和Dialog结构搭建
css
.g-dialog-container{ position:fixed; left:0p; top:0; width:100%; height:100%; //background:#eeeeee; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; } .g-dialog-container .dialog-window { /* padding: 1em; */ padding: 20 50px; border-radius: 10px; background: #fdfafa; } .g-dialog-container .dialog-window .dialog-header.waring{ width:80px; height:80px; margin:0 auto; background-image:url('./loading.gif'); background-size:80px 80px; } .g-dialog-container .dialog-window .dialog-header.ok{ width:80px; height:80px; margin:0 auto; background-image:url('./loading.gif'); background-size:80px 80px; } .g-dialog-container .dialog-window .dialog-content{ color:black; font-size:13px; text-align:center; } .g-dialog-container .dialog-window .dialog-footer button{ padding:9px 14px; out-line:none; background:blue; font-size:white; border-style:none; color:white; border-rdius:3px; } .g-dialog-container .dialog-window .dialog-footer button.green{ background: #00ffe9; } .g-dialog-container .dialog-window .dialog-footer button.black{ background:#b9b8ac; } .g-dialog-container .dialog-window .dialog-footer button.red{ background:#752c24; }
html
<html> <head> <meta charset="utf-8"> <title>移动弹出框组件</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。--> <meta content="telephone=no" name="format-detection" /> <meta content="email=no" name="format-detection" /><!--将不识别邮箱--> <meta name="apple-mobile-web-app-capable" content="no" /> <!--这meta的作用就是删除默认的苹果工具栏和菜单栏--> <meta name=”apple-mobile-web-app-status-bar-style” content=black” /> <!-- 默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）--> <meta name="apple-mobile-web-app-capable" content="yes"/> <link type="text/css" rel="stylesheet" href="./index.css"> <script src="./index.js"> </script> <style> *{ padding:0; margin:0; } body{ background:black; } </style> </head> <body> <div class="g-dialog-container"> <div class="dialog-window"> <div class="dialog-header ok"> </div> <div class="dialog-content"> 是否删除？ </div> <div class="dialog-footer"> <button class="red"> 删除 </button> <button class="green"> 删除 </button> <button class="black"> 关闭 </button> </div> </div> </div> </body> </html>
效果：
