弹窗关键点

2018-06-24 01:41:19来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

弹窗制作:

优化 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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【Dojo 1.x】笔记7 配置对象dojoConfig的内容1:has属性、加载器

下一篇:js通过String取得对应全局Object的值