当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 弹窗关键点

弹窗关键点

2018年03月13日  | 移动技术网IT编程  | 我要评论

弹窗制作：

优化 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')这样用

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网