最近公司要做弹出层来实现交互，请问如何解决。

做一个div，样式定义的漂亮点然后默认的style='display:none';要提示的时候，让它style='display:block;z-index:999';显示完了，再次display：none

解决方案 »

  1.   

    另外给他个id， 比如prom把要显示的内容，比如contentdocument.getElementById('prom').innerHTML = content ;//content是要显示的内容
      

  2.   


    <!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>alert重构效果演示.相关样式，近期推出</title>
    <script src="/global/js/jquery-1.2.3.min.js" type="text/javascript" charset="utf-8"><!-- 导入jquery框架的代码 --></script><script>
    //这段代码压缩过，拿着用就行了，不用理解。
    (function($) {
    $.fn.jqm=function(o){
    var _o = {
    zIndex: 3000,
    overlay: 50,
    overlayClass: 'jqmOverlay',
    closeClass: 'jqmClose',
    trigger: '.jqModal',
    ajax: false,
    target: false,
    modal: false,
    toTop: false,
    onShow: false,
    onHide: false,
    onLoad: false
    };
    return this.each(function(){if(this._jqm)return; s++; this._jqm=s;
    H[s]={c:$.extend(_o, o),a:false,w:$(this).addClass('jqmID'+s),s:s};
    if(_o.trigger)$(this).jqmAddTrigger(_o.trigger);
    });};$.fn.jqmAddClose=function(e){hs(this,e,'jqmHide'); return this;};
    $.fn.jqmAddTrigger=function(e){hs(this,e,'jqmShow'); return this;};
    $.fn.jqmShow=function(t){return this.each(function(){if(!H[this._jqm].a)$.jqm.open(this._jqm,t)});};
    $.fn.jqmHide=function(t){return this.each(function(){if(H[this._jqm].a)$.jqm.close(this._jqm,t)});};$.jqm = {
    hash:{},
    open:function(s,t){var h=H[s],c=h.c,cc='.'+c.closeClass,z=(/^\d+$/.test(h.w.css('z-index')))?h.w.css('z-index'):c.zIndex,o=$('<div></div>').css({height:'100%',width:'100%',position:'fixed',left:0,top:0,'z-index':z-1,opacity:c.overlay/100});h.t=t;h.a=true;h.w.css('z-index',z);
     if(c.modal) {if(!A[0])F('bind');A.push(s);o.css('cursor','wait');}
     else if(c.overlay > 0)h.w.jqmAddClose(o);
     else o=false; h.o=(o)?o.addClass(c.overlayClass).prependTo('body'):false;
     if(ie6){$('html,body').css({height:'100%',width:'100%'});if(o){o=o.css({position:'absolute'})[0];for(var y in {Top:1,Left:1})o.style.setExpression(y.toLowerCase(),"(_=(document.documentElement.scroll"+y+" || document.body.scroll"+y+"))+'px'");}} if(c.ajax) {var r=c.target||h.w,u=c.ajax,r=(typeof r == 'string')?$(r,h.w):$(r),u=(u.substr(0,1) == '@')?$(t).attr(u.substring(1)):u;
      r.load(u,function(){if(c.onLoad)c.onLoad.call(this,h);if(cc)h.w.jqmAddClose($(cc,h.w));e(h);});}
     else if(cc)h.w.jqmAddClose($(cc,h.w)); if(c.toTop&&h.o)h.w.before('<span id="jqmP'+h.w[0]._jqm+'"></span>').insertAfter(h.o);
     (c.onShow)?c.onShow(h):h.w.show();e(h);return false;
    },
    close:function(s){var h=H[s];h.a=false;
     if(A[0]){A.pop();if(!A[0])F('unbind');}
     if(h.c.toTop&&h.o)$('#jqmP'+h.w[0]._jqm).after(h.w).remove();
     if(h.c.onHide)h.c.onHide(h);else{h.w.hide();if(h.o)h.o.remove();} return false;
    }};
    var s=0,H=$.jqm.hash,A=[],ie6=$.browser.msie&&($.browser.version == "6.0"),
    i=$('<iframe src="javascript:false;document.write(\'\');" class="jqm"></iframe>').css({opacity:0}),
    e=function(h){if(ie6)if(h.o)h.o.html('<p style="width:100%;height:100%"/>').prepend(i);else if(!$('iframe.jqm',h.w)[0])h.w.prepend(i); f(h);},
    f=function(h){try{$(':input:visible',h.w)[0].focus();}catch(e){}},
    F=function(t){$()[t]("keypress",m)[t]("keydown",m)[t]("mousedown",m);},
    m=function(e){var h=H[A[A.length-1]],r=(!$(e.target).parents('.jqmID'+h.s)[0]);if(r)f(h);return !r;},
    hs=function(w,e,y){var s=[];w.each(function(){s.push(this._jqm)});
     $(e).each(function(){if(this[y])$.extend(this[y],s);else{this[y]=s;$(this).click(function(){for(var i in {jqmShow:1,jqmHide:1})for(var s in this[i])if(H[this[i][s]])H[this[i][s]].w[i](this);return false;});}});};
    })(jQuery);
    </script>
    <script>
    document.write( "<div  id=\"jqmAlert\" class=\"jqmWindow\"><div id=\"jqmTitle\"><span>这里是标题</span><img src=\"/admin/include/demo/window_close.jpg\" alt=\"关闭\"></div><div id= \"jqmContent\">内容加载中．．．请稍候．　creatByXuxing</div><div id = \"jqmBut\"> <input type=\"button\" id=\"closeJqm\" value=\"关闭\"  onclick = 'jqmClose();'/> </div></div>" );
    function alert( msg )
    {
    if(  arguments.length == 2 ){  //当定制了挂载的模式时．
       
    if( arguments[1].toString() == "div" )
    {

    $( "#jqmContent" ).html ( $("#"+msg).html() );
    $( "#jqmAlert" ).jqm({overlay:0}).jqmShow();
     return ;
    }
    if( arguments[1].toString() == "ajax")
    {
    $( "#jqmContent" ).html ( $("#"+msg).html() );
    $( "#jqmAlert" ).jqm({  ajax: msg, target: '#jqmContent',overlay:0}).jqmShow();
    return;
    }
    }
    else{
    $( "#jqmContent" ).html ( msg );
    $( "#jqmAlert" ).jqm({overlay:0}).jqmShow();
    }

    }function jqmClose()
    {
     $( "#jqmAlert").jqmHide();
    }
    </script><style>
    .jqmWindow {
        display: none;
        position: fixed;
        top: 17%;
        left: 50%;
        margin-left: -300px;
    width:500px;
         border: 1px solid #93a6aa;
    background-color:#dfe6ed;
        padding: 10px;
    }
    .jqm {display:none;}* html .jqmWindow {
         position: absolute;
     width:600px;
         top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
    }#jqmTitle{height:24px; line-height:24px; font-family:"微软雅黑"; font-weight:bold; color:#407aa9; float:left;}
    #jqmTitle span{float:left;}
    #jqmTitle img{float:right;}#jqmContent{background-color:#fff; clear:both; border:1px solid #b1bcc0; border-bottom:none; line-height:20px; padding:3px;}#jqmBut{clear:both; background-color:#fff; text-align:center; border:1px solid #b1bcc0; border-top:none; padding:10px 0;}#jqmBut input{width:60px; background-color:#eaeff0; border:1px solid #9fb9d6; padding-top:2px;}
    </style>
    <body>
    <pre>
            1  alert( "msg");     和原有alert一样，弹出msg信息提示给用户.
            2  alert( "divId" ,"div");   弹出层，并将id 为divId 的层，挂接到弹出的层上去.</pre>
    <hr/>
    <h1>1 alert( "msg");     和原有alert一样，弹出msg信息提示给用户.</h1>
    <input type="button" onclick="alert('和原有alert一样，弹出msg信息提示给用户')"  value = '普通的alert应用'/><hr/>
    <h1>2alert( "divId" ,"div");   弹出层，并将id 为divId 的层，挂接到弹出的层上去..</h1><input type="button" onclick="alert( 'mount','div' )"  value = '层挂载的应用'/>
    <div id="mount" style="display:none;">需要挂载这个层的信息<textarea>看这里</textarea></div>
    </body>
    本来还有个ajax导入页的，最近老是合其它效果混合时，出问题，所以先去掉了，这个将就着用用。
      

  3.   

    对了，要先导入jquery库
    这个要是没有，你就去下载一下，用他来解决一些基础是js 也是蛮有效果的。
      

  4.   


    <html>
    <head>
        <title>无标题页</title>    <script type="text/javascript" language="javascript">
        function show()
        {
           with(document.getElementById("div1").style)
           {
              left  =  (document.body.offsetWidth - parseInt(width)) / 2;
              top  =  (document.body.offsetHeight - parseInt(height)) / 2;          display = "";
           }
        }
        function submit1()
        {
           //你的提交代码
           document.forms[0].submit();
           document.getElementById('div1').style.display = 'none';
        }
        function cancel1()
        {
           document.getElementById('div1').style.display = 'none';
        }
        </script></head>
    <body style="text-align: center; margin: 0; padding: 0;">
        <form id="form1" name="form1" runat="server">
            <input type="button" value="提交" onclick="show()" />
            <div style="position: absolute; z-index: 100; width: 300px; height: 100px; border: solid 1px red;
                display: none;" id="div1">
                确认提交吗？<br />
                <input type="button" value="确认" onclick="submit1()" />
                <input type="button" value="取消" onclick="cancel1()" /></div>
        </form>
    </body>
    </html>
      

  5.   

    http://61.234.152.100/admin/demo/DemoAlert.html这个是刚才的代码的demo.
    全面代替alert("");　用过后程序都不用改。
    定位支持ie ff (jquery 做的，想不支持也有点难度。)请及时验货，给分吧。
      

  6.   

    改好了，你再去看看，　
    就是把这个的关闭图片加个事件就可以了。
    document.write( "<div  id=\"jqmAlert\" class=\"jqmWindow\"><div id=\"jqmTitle\"><span>这里是标题</span><img src=\"/admin/include/demo/window_close.jpg\" alt=\"关闭\"></div><div id= \"jqmContent\">内容加载中．．．请稍候．　creatByXuxing</div><div id = \"jqmBut\"> <input type=\"button\" id=\"closeJqm\" value=\"关闭\"  onclick = 'jqmClose();'/> </div></div>"全是静态的，你自己去下载和实现。还有什么问题？？？？？？
      

  7.   

    感谢大家。kqh168 的效果很好用，代码简洁。可惜不是模式对话框。
    striker_un 则有成熟产品的感觉，先收下了。
      

  8.   

    突然发现，分给错了，对不起了striker_un 有机会分补给你。