写的一个弹出层，效果还不错，本人新手，发一下如果那里写的不对求大神指教。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
 function tcc(obg){
 document.getElementById("met").style.display="block";
 if(obg=="按钮"){
 $("#metw").html("你喜欢我们吗？")
 }
 if(obg=="删除"){
 $("#metw").html("你确定要删除吗？")
 }
 }
 function ycc(){
 document.getElementById("met").style.display="none";
 }
</script>
<style>
#metw{ position:absolute; margin-top:10px; margin-left:10px; margin-right:10px; color:#000;}
.metx{ height:20px; width:20px; position:relative; float:right; text-align:center; font-size:20px}
.met{ width:200px; height:200px; text-align:center; border:4px solid #F00; background:#eee; position:absolute; left:50%; top:50%; margin-top:-100px; margin-left:-100px;}
</style>
</head><body>
<input name="" type="button" onclick="tcc('按钮')" value="按钮" />
<a href="javascript:tcc('删除')">删除</a>
<!--<a href="javascript:tcc('按钮')">按钮</a>-->
<div class="met" id="met" style="display:none">
 <div id="metw">111</div>
 <div class="metx"><a href="javascript:ycc()">x</a></div>
 
</div>
</body>
</html>
javascript

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type='text/css'>
    body { margin:0; padding:0; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    var body_width,body_height;
    function width_height() {
             body_width = $(document).width();
             body_height = $(document).height();
            }
    (function( $, undefined ) {
        $.extend({
        showDiv: function() {
            var divBg = $('<div></div>');
            divBg.css({width:body_width, height:body_height, position:'absolute', left:'0', top:'0', backgroundColor:'#ccc', zIndex:'99'});
            var $ceng = $("<div></div>")
            $ceng.css({width:'50px', height:'50px', position:'absolute', left:body_width/2, top:body_height/2, border:'1px solid #000', fontSize:'15px', zIndex:'100'});
            var $title = $('<div></div>');
            $title.css({height:'10px'});
            $btn = $('<div></div>');
            $btn.css({width:'10px', height:'10px', backgroundColor:'black', float:'right'});
            $btn.attr('id','btn');
            $title.append($btn);
            $ceng.append($title);
            //divBg.append($ceng);
            $('body').append(divBg);
            $('body').append($ceng);
            $('#btn').click(function() {
             divBg.css('display', 'none');
             $ceng.css('display', 'none');
            });
        }
    });
    }(jQuery));
    $(function() {
    width_height();
        $.showDiv();
    });
    window.onresize = function() {
    width_height();
    $('body').delete(divBg);
    $('body').delete($ceng);
        $.showDiv();
    };
    </script>
    </head><body>
    <div></div></body>
    </html>
      

  2.   

    楼主，你这个不是模态对话框你可以加一个层，设置其style=display: none, z-index: 999, background-color: #AAAAAA, opacity: 0.3
    根据窗体和内容动态调整其高度和宽度
    然后你的对话框的层设置 z-index=1000，不透明，当点对话框上的“关闭”按钮时，隐藏这两个层简单点说，就是先用一个层遮住整个页面(style.z-index=999)，再在这个层上放一个层，就成了模态对话框
    如果功能想更强大一点，在你的对话框的层上，再嵌套一个iframe，就可以在一个页面上用模态对话框的方式打开另外一个页面了 
      

  3.   

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>基于JQuery的JS遮罩层效果</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript">
        function showDiv() {
         document.body.style.overflow = 'hidden';
         var docHeight = Math.max(document.documentElement.scrollHeight,
    document.documentElement.clientHeight);
    var docWidth = Math.max(document.documentElement.scrollWidth,
    document.documentElement.clientWidth);
         var _div = document.createElement('div');
         _div.className = 'divClass';
         _div.setAttribute('id', 'divId');
         document.body.appendChild(_div);
         document.getElementById('divId').style.width = docWidth + 'px';
         document.getElementById('divId').style.height = docHeight + 'px';
         var _divAlert = document.createElement('div');
         _divAlert.className = 'divalert';
         _divAlert.id = 'divalert';
         document.body.appendChild(_divAlert);
         document.getElementById('divalert').style.left = (document.documentElement.clientWidth - 200)/2 + 'px';
         document.getElementById('divalert').style.top = (document.documentElement.clientHeight - 100)/2 + 'px';
         var _divContent = document.createElement('div');
         _divContent.id = 'divcontent';
         _divAlert.appendChild(_divContent);
         var _divbtn = document.createElement('div');
         _divbtn.id = 'divbtn';
         var _btn = document.createElement('input');
         _btn.type = 'button';
         _btn.value = '确定';
         _btn.id = 'btn';
         _divbtn.appendChild(_btn);
         _divAlert.appendChild(_divbtn);
         document.getElementById('btn').onclick = function() {
         document.getElementById('divId').style.display = 'none';
         document.getElementById('divalert').style.display = 'none';
         document.body.style.overflow = 'auto';
         }
        }
        function resizeDiv() {
         var docHeight = Math.max(document.documentElement.scrollHeight,
    document.documentElement.clientHeight);
    var docWidth = Math.max(document.documentElement.scrollWidth,
    document.documentElement.clientWidth);
    document.getElementById('divId').style.width = document.documentElement.clientWidth + 'px';
         document.getElementById('divId').style.height = document.documentElement.clientHeight + 'px';
        }
        window.onload = function() {
           showDiv(); 
        }
        window.onresize = resizeDiv;
        </script>
        <style type="text/css">
    body { margin:0; padding:0; }
    .divClass { position:absolute; left:0; top:0; background-color:#ccc; z-index:0; }
    .divalert { position:absolute; z-index:2000; width:200px; height:100px; border:1px solid #666; background-color:#fff; }
        #divcontent { height:60px; }
        #divbtn { height:40px; background-color:#ddd; text-align:center; }
        #btn { border:1px solid #000; margin-top:10px; }
        </style>
        </head>
        <body>
    <div style='height:1000px;'>fsfs</div>
        </body>
        </html>
      

  4.   

    document.getElementById('divalert').style.left = (document.documentElement.clientWidth - 200)/2 + 'px';
            document.getElementById('divalert').style.top = (document.documentElement.clientHeight - 100)/2 + 'px';
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>基于JQuery的JS遮罩层效果</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript">
        function showDiv() {
            document.body.style.overflow = 'hidden';
            var docHeight = Math.max(document.documentElement.scrollHeight,
            document.documentElement.clientHeight);
            var docWidth = Math.max(document.documentElement.scrollWidth,
            document.documentElement.clientWidth);
            var _div = document.createElement('div');
            _div.className = 'divClass';
            _div.setAttribute('id', 'divId');
            document.body.appendChild(_div);
            document.getElementById('divId').style.width = docWidth + 'px';
            document.getElementById('divId').style.height = docHeight + 'px';
            var _divAlert = document.createElement('div');
            _divAlert.className = 'divalert';
            _divAlert.id = 'divalert';
            document.body.appendChild(_divAlert);
            document.getElementById('divalert').style.left = (document.documentElement.clientWidth - 200)/2 + 'px';
            document.getElementById('divalert').style.top = (document.documentElement.clientHeight - 100)/2 + 'px';
            var _divContent = document.createElement('div');
            _divContent.id = 'divcontent';
            _divAlert.appendChild(_divContent);
            var _divbtn = document.createElement('div');
            _divbtn.id = 'divbtn';
            var _btn = document.createElement('input');
            _btn.type = 'button';
            _btn.value = '确定';
            _btn.id = 'btn';
            _divbtn.appendChild(_btn);
            _divAlert.appendChild(_divbtn);
            document.getElementById('btn').onclick = function() {
                document.getElementById('divId').style.display = 'none';
                document.getElementById('divalert').style.display = 'none';
                document.body.style.overflow = 'auto';
            }
        }
        function resizeDiv() {
            var docHeight = Math.max(document.documentElement.scrollHeight,
            document.documentElement.clientHeight);
            var docWidth = Math.max(document.documentElement.scrollWidth,
            document.documentElement.clientWidth);
            document.getElementById('divId').style.width = document.documentElement.clientWidth + 'px';
            document.getElementById('divId').style.height = document.documentElement.clientHeight + 'px';
            document.getElementById('divalert').style.left = (document.documentElement.clientWidth - 200)/2 + 'px';
            document.getElementById('divalert').style.top = (document.documentElement.clientHeight - 100)/2 + 'px';
        }
        window.onload = function() {
           showDiv(); 
        }
        window.onresize = resizeDiv;
        </script>
        <style type="text/css">
        body { margin:0; padding:0; }
        .divClass { position:absolute; left:0; top:0; background-color:#ccc; z-index:0; }
        .divalert { position:absolute; z-index:2000; width:200px; height:100px; border:1px solid #666; background-color:#fff; }
        #divcontent { height:60px; }
        #divbtn { height:40px; background-color:#ddd; text-align:center; }
        #btn { border:1px solid #000; margin-top:10px; }
        </style>
        </head>
        <body>
        <div style='height:1000px;'>fsfs</div>
        </body>
        </html>