利用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());
        }

 

 效果图：