弹窗样式,支持二维码与表单

- 作者:流年 -

弹窗样式,支持二维码与表单

css样式:

/*弹窗样式*/
        .black_overlay{ 
            display: none; 
            position: fixed; 
            top: 0%; 
            left: 0%; 
            width: 100%; 
            height: 100%; 
            background-color: black; 
            z-index:1001; 
            -moz-opacity: 0.8; 
            opacity:.80; 
            filter: alpha(opacity=88); 
        } 
        .white_content { 
            display: none; 
position: fixed;
    top: 20%;
    left: 25%;
    border: 10px solid #ffbfbb;
    background-color: white;
    z-index: 1002;
    text-align: center;
    margin: auto;
    max-width: 750px;
    align-content: center;
    right: 25%;
        } 
/*弹窗样式end*/

============================


html代码:

隐藏层:

    <div style="max-width:750px;margin:auto;">
        <div id="light" class="white_content" style="display: none;">
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" style="position: absolute;right: -18px;top: 1px;width: 50px;height: 50px;border-radius: 50%;text-decoration: none;"><span style="font-size: 15px;color: #ffbfbb;">X</span></a>
<img style="width:100%;" src="http://pic.rmb.bdstatic.com/2c2335f055210f4565bea4656892a232.jpeg">
 
<span style="font-size: 24px;color: #ff918a;position: relative;bottom: 10px;">扫一扫咨询</span>
 
</div>
</div>
        <div id="fade" class="black_overlay" style="display: none;"></div>


点击可见按钮:


<p>示例弹出层:<div href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</div></p>