弹窗关键点

弹窗制作：

优化 css用模板字符串（里面需要加一个style 标签）插入的
${'head'}.append(css)
append()插入末尾
prepend ()
在 p 元素的开头插入内容
$(".btn1").click(function(){
$("p").prepend("<b>Hello world!</b>");
})
弹窗的垂直居中：
<div class='modal-container modal-remove'>看下面，可单独用.查找

.modal-alert {
　　margin: 0 auto;//单独这个是不会居中的，需加上width
　　width: 200px;
　　opacity: 1;
}
.vertical-center { //上面那个不算绝对居中，加上这个才算
　　position: relative;
　　top: 50%;
　　transform: translateY(-50%);//为-是向上
}

margin后面是有4个参数的。例如：margin:1px 1px 1px 1px
分别表示 上、右、下、左。如果只写2个参数的话，比如：margin：1px 2px
那么着是代表 上下都为1px 左右都为2px.
至于居中，margin:0 auto 是标准的写法

把罩子和弹窗分开放在一个容器内，不是弹窗放在罩子里
<div class='modal-container modal-remove'>
<div class='modal-mask'></div>
<div class="modal-alert vertical-center">

.modal-title {
　　text-align: center;//文字格式
　　font-size: 27px;//文字大小
　　background: lightblue;//背景色
}

div与button之间有缝隙，想要消除，把button放在一个div里面，button的 border: 0;

两个相邻的button之间没有缝隙，把他们父节点（只包括这两个按钮）的div的font-size：0，即字体不显示
所有的button都是100%，没有点了 button {
　　　　　　　　　　　　　　　　　　　　width: 100%;
　　　　　　　　　　　　　　　　　　}
隐藏是display;none 出现block
border的样式http://www.w3school.com.cn/tiy/t.asp?f=csse_border-style

最后删除时候，不要忘了删除css，具体操作是把contain 与 css 添加一个相同class，最后删除

浏览器里不显示style的话，可能是display是none,改为block，block！important，或者inline-block，

自制属性，data-*,如data-type='asd', $(event.target).data('type')这样用

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有