好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

js实现弹框效果

本文实例为大家分享了js实现弹框效果的具体代码,供大家参考,具体内容如下

利用display来控制弹窗的现实和隐藏

?

<!-- 弹出层 -->

< div id = "popLayer" ></ div > <!--黑色蒙版 -->

< div id = "popBox" >

   < div class = "close" >

    X

   </ div >

   < div >

    <!-- 内容 -->

  </ div >

</ div >

js:

?

//点击关闭按钮

var close = document.querySelector( ".close" )

close.onclick = function () {

  console.log( "点击" )

  var popBox = document.getElementById( "popBox" );

  var popLayer = document.getElementById( "popLayer" );

  popBox.style.display = "none" ;

  popLayer.style.display = "none" ;

}

 

 

//需要显示时调用

var popLayer = document.getElementById( "popLayer" );

popBox.style.display = "block" ;

popLayer.style.display = "block" ;

CSS:

?

/* 弹出层 */

#popLayer {

  display : none ;

  background-color : #000 ;

  position : absolute ;

  top : 0 ;

  right : 0 ;

  bottom : 0 ;

  left : 0 ;

  z-index : 10 ;

  opacity: 0.6 ;

}

 

/*弹出层*/

#popBox {

  display : none ;

  background-color : #FFFFFF ;

  z-index : 11 ;

  width : 220px ;

  height : 300px ;

  position : fixed ;

  top : 0 ;

  right : 0 ;

  left : 0 ;

  bottom : 0 ;

  margin : auto ;

}

 

/*关闭按钮*/

#popBox .close {

  width : 20px ;

  height : 20px ;

  border-radius: 50% ;

  position : absolute ;

  border : 1px solid #fff ;

  color : #fff ;

  text-align : center ;

  line-height : 20px ;

  right : 8px ;

  top : 8px ;

  z-index : 50 ;

}

 

#popBox .close a {

  text-decoration : none ;

  color : #2D2C3B ;

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/youngKing0615/article/details/114867921

dy("nrwz");

查看更多关于js实现弹框效果的详细内容...

  阅读:41次