一:摸态框套用
直接在模板页在浏览器打开右键找到想要的编辑成html状态直接复制到项目中去
下面的页面就是模板页中的摸态框
直接在模板页点开位置有点问题(某些版本,其实也就是样式那个top有问题),
不管他直接右键找他然后复制到项目中去
然后运行会发现问题,就是他本身就是打开的,因为我们是在打开状态然后在去复制出来的,肯定是打开状态,
在弹框的div加个dispay:none就可以隐藏了,还有就是那个margin-top直接复制出来有可能是负数,自己调整下
二:打开弹窗
如果直接$(“弹窗id”).show();
他是能够显示出来,但是没有遮罩层,也不用关闭
应该使用如下代码来打开就没问题了
但是问题是弹窗没有垂直居中,而是偏上一些,就是设置的top问题,我们需要计算中间的位置,
设置一个top就可以弹框垂直居中了
直接设置top 是没问题的
更具页面高度来计算
但是这里要注意:改变top的div是样式为z-index下面一个div才行
显示了在计算垂直居中与计算了在显示出来效果不一样:因为没显示出来的时候获取到自己的高度是0(父级隐藏了)
改写下:默认把z-index设置为显示,把弹出层内容设置为隐藏(这种方法效率比较慢jQuery内部原理是要先复制一个出来所以会照成弹框打开比较慢)
然后js调整下顺序与id就可以了
https://club.1688.com/article/25327134.html
http://www.cnblogs.com/firstcsharp/p/4183181.html
http://www.tuicool.com/articles/j2iayq
http://www.cnblogs.com/ZHF/p/3739022.html