弹窗关键点
弹窗制作:
优化 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')这样用