求一消息框源码，标题要长~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

我想实现这个效果
比如一个添加新闻的页面，输入完成后点击“添加”按钮，页面出现遮罩层，中间出现“新闻添加中...”，添加完毕后，遮罩层消失，页面中间出现自定义的消息框（不是那种简单的JS弹出框），提示新闻添加成功等.
最好给个简单的实例。

解决方案 »

  1.   

    jquery
    OnClientClick=<%# "OpenWindow('"+Eval("Id")+"', 700,250);return false;" %>
        
    <SCRIPT src="js/ui.mouse.js" type=text/javascript></SCRIPT>
      <SCRIPT src="js/ui.draggable.js" type=text/javascript></SCRIPT>
      <SCRIPT src="js/jquery.jwindow.js" type=text/javascript></SCRIPT>
      <script>
     function OpenWindow(id,width,height) {
      var p = document.getElementById("<%=hf_Id.ClientID %>").value;
      var url = "a.aspx?Id=" + id + "&pId=" + p;
      SetTitle(url);
      OpenJWindow('#openwin', url, width, height, EditClosed);
    }
    function SetTitle(url)
    {
      var obj = document.getElementById("winTitle");
        
      if(url.lastIndexOf("Id") >0){
      obj.innerHTML ="编辑";
      return;
      }   
      obj.innerHTML ="新增";
    }
    function EditClosed(result) {  if (result == "0") return;
      return false;
    }
      

  2.   

    FortuneBase
    www.cnblogs.com/mail-ricklee
      

  3.   


    <!--其实很简单，主要是美观问题，如果你不想去自己写样式就去网上下吧，很多蛮好看的弹出层-->
    <!--添加新闻的时候用ajax添加数据，添加成功后弹出提示-->
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %><!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 runat="server">
        <title>无标题页</title>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("a").click(function(){
                    $("#mask").css({"display":"block","width":$(window).width(),"height":$(window).height()});
                    $("#tip").css({"display":"block","left":($(window).width()-$("#tip").width())/2,"top":($(window).height()-$("#tip").height())/2});
                })     
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <a>获取</a>
        <div id="mask" style="background:#000;display:none;z-index:99;top:0px;left:0px;position:absolute;"></div>
        <div id="tip" style="width:200px;height:200px;background:red;display:none;position:absolute;z-index:100;"></div>
        </form>
    </body>
    </html>
      

  4.   


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="StadyTest.aspx.cs" Inherits="StadyTest" %><%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
    <!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 runat="server">
        <script language="JavaScript" type="text/javascript">
     function $(id)
            {
                return (document.getElementById) ? document.getElementById(id) : document.all[id] ;
            }
    function showFloat()
            {
                var range = getRange();
                $('doing').style.width = range.width + "px";
                $('doing').style.height = range.height + "px";
                $('doing').style.display = "block";
                document.getElementById("divReg").style.display="";
            }
            function getRange() 
            {
                  var top     = document.body.scrollTop;
                  var left    = document.body.scrollLeft;
                  var height  = document.body.clientHeight;
                  var width   = document.body.clientWidth;              if (top==0 && left==0 && height==0 && width==0) 
                  {
                    top     = document.documentElement.scrollTop;
                    left    = document.documentElement.scrollLeft;
                    height  = document.documentElement.clientHeight;
                    width   = document.documentElement.clientWidth;
                  }
                  return  {top:top  ,left:left ,height:height ,width:width } ;
            } 
        </script>
    </head>
    <body onload="f1();showFloat();">
        <form id="form1" runat="server">
    <!--加一个半透明层-->
        <div id="doing" style="filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.5;
            background-color: lightgrey; width: 100%; height: 100%; z-index: 1000; position: absolute;
            left: 0; top: 0; display: none; overflow: hidden;">
        </div>
        <!--加一个弹出层-->
        <div id="divReg" style="z-index: 1001; position: absolute; display: none; top: 363px;
            left: 667px; margin: -200px 0 0 -400px; height: 468px; width: 494px; border-right: powderblue 1px solid;
            border-top: powderblue 1px solid; border-left: powderblue 1px solid; border-bottom: powderblue 1px solid;">
            <table class="BaseTable" style="width: 550px; height: 589px">
                <tr>
                    <td valign="middle" align="left" class="BaseTableHead" style="height: 25px; width: 330px;">
                        <strong>用户注册&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="blue">请注册成功后再使用系统！</font></strong>
                    </td>
                    <%--  去掉右上角关闭按钮
                  <td valign="middle" align="right" class="BaseTableHead" style="height: 25px">
                        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Source/Image/icon-delete.gif" />
                    </td>--%>
                </tr>
                <tr>
                    <td valign="top" colspan="2" style="height: 358px">
                        &nbsp;<iframe id="Iframe1" src="User/frmUserReg.aspx" onload="this.height=Iframe1.document.body.scrollHeight;this.width=Iframe1.document.body.scrollWidth;"
                            scrolling="no" frameborder="0" style="width: 580px; height: 548px"></iframe>
                    </td>
                </tr>
            </table>
        </div>
        </form>
    </body>
    </html>LZ看下是这样的效果不
      

  5.   

    http://www.caixw.com/public/uploads/demo/jquery/dialog/绝对是你要的效果
      

  6.   

    可以到JQUERY官网看看的说 ~