zoukankan      html  css  js  c++  java
  • 遮罩层div

    <html>
    <head>
    <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
            function ShowDialog() {
                $('#divGray').css('height', $(document).height());
                $('#divGray').show();
                
                $('#divEdit').css('top', $(document).scrollTop() + 80);
                $('#divEdit').css('left', ($(document).width() - 500) / 2);
                $('#divEdit').show();

                $('#divShadow').css('top', $('#divEdit').offset().top + 5);
                $('#divShadow').css('left', $('#divEdit').offset().left + 5);
                $('#divShadow').css('width', $('#divEdit').width());
                $('#divShadow').css('height', $('#divEdit').height());
                $('#divShadow').show();
            }
            
            function CancelDialog() {
                $('#divGray').hide();
                $('#divEdit').hide();
                $('#divEdit input:text').val('');
                $('#divShadow').hide();
            }
    </script>
    <style type="text/css">
    #divEdit {
        position: absolute;
        z-index: 10003;
         480px;
        border-top: #709cd2 1px solid;
        border-left: #709cd2 1px solid;
        border-right: #709cd2 1px solid;
        border-bottom: #709cd2 1px solid;
        display: none;
    }
    #divGray {
        position: absolute;
        z-index: 10001;
        left: 0px;    
        top: 0px;
         100%;
        background-color: #EEEFFF;
        opacity: 0.6;                /* Firefox, Safari(WebKit), Opera)
        filter: "alpha(opacity=60)"; /* IE 8 */
        filter: alpha(opacity=60);   /* IE 4-7 */
        display: none;
    }
    #divShadow {
        position: absolute;
        z-index: 10002;
        background: #000EEE;
        opacity: 0.1;                /* Firefox, Safari(WebKit), Opera)
        filter: "alpha(opacity=10)"; /* IE 8 */
        filter: alpha(opacity=10);   /* IE 4-7 */
        display: none;
    }
    </style>
    </head>
    <body>
    <input  type="button" style="height: 30px; 100px;" onClick="ShowDialog()" value="cover" />
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <input type="button" value="test" />

    <div id="divEdit">
            abcd
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <input type="button" value="cancel" onClick="CancelDialog()"/>
    </div>
    <div id="divGray"></div><div id="divShadow"></div>
    </body>
    </html>
  • 相关阅读:
    转:JMeter5的If Controller操作解析
    .NET Core优秀的应用逻辑分层框架设计
    socket阻塞导致拿不到信息
    2018年开始了,我们还是说说2017吧
    PHP 学习 遇到坑的第一章
    记一次高并发情况,服务器和代码修改过程记录。
    IIS 提高连接的并发数,和CPU的使用率。
    2017年总结
    在 safari 浏览器 onclick 出现延迟的现象
    微信JS-api 注意事项
  • 原文地址:https://www.cnblogs.com/gaotianle/p/1611893.html
Copyright © 2011-2022 走看看