margin的独到用法

原创 1244321641 随笔 总结日志 172阅读 2018-01-03 10:36:20 举报

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>;
<script src="qrcode.min.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<div id="modal-overlay"> </div>
<div class="modal-data" id="ccc" style="visibility: hidden;">
<a href="#" style="display:block;text-align:right;text-decoration:none;" onclick="overlay()">X</a>
<p id="code" style="width:300px;height:300px;border:1px solid #fff;margin-top:10px;"></p>
<div align="center" style="font-weight:bold;margin-top:10px;">请扫描一下二维码 </div>
</div>

<a href="#" onclick="overlay()">显示模态对话框</a>
<style>
{
margin:0;
padding:0;
}
/
定义模态对话框外面的覆盖层样式 */

modal-overlay {

         visibility: hidden;    
         position: absolute;   /* 使用绝对定位或固定定位  */
         left: 0px;    
         top: 0px;
         width:100%;
         height:100%;
         text-align:center;
         z-index: 1000;
         background-color: #ddd; 
         opacity: 0.5;   /* 背景半透明 */
    }
    /* 模态框样式 
    .modal-data{
         width:310px;
         height:350px;
         margin: 100px auto;
         background-color: #fff;
         border:1px solid #000;
         padding:15px;
         text-align:center;
    }*/
    .modal-data{
         width:302px;
         height:360px;
         margin:auto;
         position:absolute;
         top:0;
         left:0;
         bottom:0;
         right:0;
         background-color: #fff;
         border:1px solid #fff;
         padding:10px 15px;
         text-align:center;
         z-index:1001;
    }
    </style>

<script>
function overlay(){
var e1 = document.getElementById('modal-overlay');
var e1s = document.getElementById('ccc');
e1.style.visibility = (e1.style.visibility == "visible")? "hidden" : "visible";
e1s.style.visibility = (e1s.style.visibility == "visible")? "hidden" : "visible";

       }
       //for (var j = 0; j < result.length ; j++) {
      //var id = result[j].ID;
      //var smurl = ‘’
      var qrcode = new QRCode("code", {
        text: smurl,
        width: 300,
        height: 300,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      });

</script>

<!-- Generated by RunJS (Sat May 20 17:44:01 CST 2017) 0ms -->
</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复