Home > Web Front-end > HTML Tutorial > 弹出框css技巧_html/css_WEB-ITnose

弹出框css技巧_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:20:54
Original
1287 people have browsed it

技术要点:

一个覆盖整个屏幕的浅灰色背景的div,一个包含内容的的div,

代码如下:

<div id="financeTip" >    <div class="financeTipBg" ></div>    <div id="financeTipInfor" class="e-tankuang alert financeTankuang" style=" ">       <button type="button" class="close tanweizhiClose"            data-dismiss="alert">           &times;          </button>    <div class="e-tankuang-title" id="myModalLabel">弹出框标题</div>    <div class="e-tankuang-content">弹出框信息</div>      </div>  </div>
Copy after login
$(document).ready(function(){    var m1_top = ( $(window).height() - $("#financeTipInfor").height() )/2; var m1_left = ( $(window).width() - $("#financeTipInfor").width() )/2;    $("#financeTipInfor").css({"margin": m1_top + "px" +" "+ m1_left + "px"}); window.onresize=function(){  var m1_top = ( $(window).height() - $("#financeTipInfor").height() )/2; var m1_left = ( $(window).width() - $("#financeTipInfor").width() )/2;    // $("#financeTipInfor").css({"margin": m1_top + "px auto","left": m1_left + "px"}); $("#financeTipInfor").css({"margin": m1_top + "px" +" "+ m1_left + "px"}); }  $(".close").click(function () {      $("#financeTip").css({"display": "none"});      });});
Copy after login
#financeTip{width:100%;overflow:hidden;}.financeTankuang{width:90%;}@media (min-width: 768px){.financeTankuang{width:600px;}}.financeTipBg{position:absolute;width:100%;height:100%;background:#000;z-index:8001;left:0;top:0;opacity:0.2}#financeTipInfor{position:absolute;left:0;top:0;z-index:8011;}
Copy after login

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template