利用jqueryUI做出来的提示框，方便后台弹出框提示使用

利用jqueryUI做出来的提示框，方便后台弹出框提示使用。

　　全年在一个项目中，在弹出窗体上用了alert，效果不是很好。alert是浏览器级别的，一但弹出来，那整个浏览器都被封住，只有你点击了之后才能点击其他页面。有时候用了多标签的框架，感觉很是不方便。所以，萌生用模拟的DIV来代替alert。以下是我做的部分代码，模拟弹出窗体我搜索了很多，最后还是用了JQUERY UI，功能真的很强大。

　　这个类每个WEB页面都要继承的，我把JUQERY的文件的路径也写在里面。

  1  using  System;
  2  using  System.Collections.Generic;
  3  using  System.Linq;
  4  using  System.Web;
  5 
  6  ///   <summary>
  7  /// JqueryBasicPage 的摘要说明
  8  ///   </summary>
  9  public   class  JqueryBasicPage : System.Web.UI.Page
 10  {
 11       public   string  jQueryScriptBlock  =   @" <script type=""text/javascript"" src=""Script/jquery-1.3.2.min.js""></script> " ;
 12       public   string  jqueryUI  =   @"  <script src=""Script/jquery-ui-1.7.2.custom.min.js"" type=""text/javascript""></script> " ;
 13       public  JqueryBasicPage()
 14      {
 15           //
 16           // TODO: 在此处添加构造函数逻辑
 17           //
 18 
 19      }
 20 
 21       public   string  ShowMessageBox( string  messageInfo)
 22      {
 23           string  regScriptString  =   @" <script language=javascript>$(document).ready( function(e) { $('#simplemodal-container').modal(); } ) </script> " ;
 24           this .ClientScript.RegisterClientScriptBlock(GetType(),  " _error " , regScriptString);
 25           return  messageInfo;
 26      }
 27 
 28 
 29       public   string  MessageBox( string  message)
 30      {
 31          System.Text.StringBuilder strString  =   new  System.Text.StringBuilder();
 32           // 先定义CSS样式
 33          strString.Append( " <style type='text/css'> " );
 34          strString.Append( "  .demoHeaders { margin-top: 2em; }  " );
 35          strString.Append( "  ul#icons {margin: 0; padding: 0;} " );
 36          strString.Append( "  ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;} " );
 37          strString.Append( "     ul#icons span.ui-icon {float: left; margin: 0 4px;}  " );
 38          strString.Append( "  </style>  " );
 39           // JS
 40          strString.Append( "  <script type='text/javascript'>  " );
 41          strString.Append( "      $(function() {  " );
 42         //   strString.Append("  $('#pMessage').append('" + message + "'); ");
 43          strString.Append( "  $('#dialog').dialog({  " );
 44          strString.Append( "  closeOnEscape: true,  " );
 45          strString.Append( "  modal: true,  " );
 46          strString.Append( "  autoOpen: true,  " );
 47          strString.Append( "    width: 260,  " );
 48          strString.Append( "  heigh:100, " );
 49          strString.Append( "   buttons: {  " );
 50          strString.Append( "  '确定': function() {  " );
 51          strString.Append( "      $(this).dialog('close');   " );
 52          strString.Append( "     } " );
 53           // strString.Append("  '取消': function() {  ");
 54           // strString.Append("  $(this).dialog('close'); ");
 55           // strString.Append("   } ");
 56           // strString.Append("  '跳转': function() { ");
 57           // strString.Append("    $(this).dialog('close'); ");
 58          //  strString.Append("   } ");
 59          strString.Append( "     }  " );
 60          strString.Append( "      });   " );
 61          strString.Append( "  $('#dialog').dialog('false');  " );
 62          strString.Append( "    return false;  " );
 63          strString.Append( "  $('#dialog_link, ul#icons li').hover(  " );
 64          strString.Append( "  function() { $(this).addClass('ui-state-hover'); },  " );
 65          strString.Append( "  function() { $(this).removeClass('ui-state-hover'); }   " );
 66          strString.Append( "      );   " );
 67          strString.Append( "    });  " );
 68          strString.Append( "      </script>      " );
 69           // 弹出窗体
 70          strString.Append( "   <div id='dialog' title='提示'>  " );
 71          strString.Append( "   <p id='dialgoMessage'> " + message + " </p> " );
 72          strString.Append( "      </div>      " );
 73           this .ClientScript.RegisterClientScriptBlock(GetType(),  " _error " , strString.ToString());
 74           return  message;
 75      }
 76       public   string  MessageBox( string  message,  string  redirectURL)
 77      {
 78          System.Text.StringBuilder strString  =   new  System.Text.StringBuilder();
 79           // 先定义CSS样式
 80          strString.Append( " <style type='text/css'> " );
 81          strString.Append( "  .demoHeaders { margin-top: 2em; }  " );
 82          strString.Append( "  ul#icons {margin: 0; padding: 0;} " );
 83          strString.Append( "  ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;} " );
 84          strString.Append( "     ul#icons span.ui-icon {float: left; margin: 0 4px;}  " );
 85          strString.Append( "  </style>  " );
 86           // JS
 87          strString.Append( "  <script type='text/javascript'>  " );
 88          strString.Append( "      $(function() {  " );
 89           //   strString.Append("  $('#pMessage').append('" + message + "'); ");
 90          strString.Append( "  $('#dialog').dialog({  " );
 91          strString.Append( "  closeOnEscape: true,  " );
 92          strString.Append( "  modal: true,  " );
 93          strString.Append( "  autoOpen: true,  " );
 94          strString.Append( "    width: 260,  " );
 95          strString.Append( "  heigh:100,  " );
 96          strString.Append( "   buttons: {  " );
 97          strString.Append( "  '确定': function() {  " );
 98          strString.Append( "      $(this).dialog('close');  " );
 99          strString.Append( "     },  " );
100          strString.Append( "   '取消': function() {   " );
101          strString.Append( "   $(this).dialog('close');  " );
102          strString.Append( "    },  " );
103          strString.Append( "   '跳转': function() {  " );
104          strString.Append( "    window.location.href=\ ""  + redirectURL +  " \ " ;   " );
105          strString.Append( "    }  " );
106          strString.Append( "     }  " );
107          strString.Append( "      });   " );
108          strString.Append( "  $('#dialog').dialog('false');  " );
109          strString.Append( "    return false;  " );
110          strString.Append( "  $('#dialog_link, ul#icons li').hover(  " );
111          strString.Append( "  function() { $(this).addClass('ui-state-hover'); },  " );
112          strString.Append( "  function() { $(this).removeClass('ui-state-hover'); }   " );
113          strString.Append( "      );   " );
114          strString.Append( "    });  " );
115          strString.Append( "      </script>      " );
116           // 弹出窗体
117          strString.Append( "   <div id='dialog' title='提示'>  " );
118          strString.Append( "   <p id='dialgoMessage'> "   +  message  +   " </p> " );
119          strString.Append( "      </div>      " );
120           this .ClientScript.RegisterClientScriptBlock(GetType(),  " _error " , strString.ToString());
121           return  message;
122      }
123  }
124

　　WEB页面里，在你添加删除成功需要弹出对话框的时候，只要调用相应的方法就可以了。我这里也就麻烦点，封装了一下，第一次写博客，如有错误，请大家见谅！

　　代码如下。请记得在页面引入 JQUERY 和JQUERY UI 的JS文件还有JQUERY UI 的CSS文件。

        protected void LinkButton1_Click(object sender, EventArgs e)
        {
            MessageBox("小样，你真不厚道！");
            //Response.Redirect("Default.aspx");
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            MessageBox("你好，请选择操作。点击跳转将跳转到谷歌主页面！", Request.Url.ToString());
        }

 

 效果图：