欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

弹窗关键点

程序员文章站 2022-04-16 09:52:47
弹窗制作: 优化 css用模板字符串(里面需要加一个style 标签)插入的 ${'head'}.append(css) append()插入末尾prepend ()在 p 元素的开头插入内容 $(".btn1").click(function(){ $("p").prepend("Hello ......

弹窗制作:

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