JQuery+JQuery ui实现的弹出窗口+遮罩层+拖动+更改大小

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">  
    function test()
    {
        alert("调用");
    }  
    $(function(){
             $('#dialog').dialog({
     autoOpen: true,//如果设置为true，则默认页面加载完毕后，就自动弹出对话框；相反则处理hidden状态。 
     bgiframe: true, //解决ie6中遮罩层盖不住select的问题  
     width: 600,
     modal:true,//这个就是遮罩效果   
     buttons: {
      "Ok": function() { 
          test();//在这里调用函数
       $(this).dialog("close"); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     }
    });
    
             $('#btn').click(function(){
     $('#dialog').dialog('open');
     return false;
    });
       });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="demo">
            <div>
                <input type="button" id="btn" value="点我啊" />
                <div>
                    <div id="dialog" title="嘿嘿" style="">
                        <p>
                            你个废物</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

解决方案 »

  1.   


    需要注意：
    1.  不用再button上加onclick方法，把所有的function都加到  $(function(){});里面。
    2. 需要引入三个文件，其中两个js，一个cssJquery ui 的dialog使用概述概述    
    一个浮动的窗口，包含标题和内容两部分。可以移动，调整大小，以及关闭图标'×'。    
    如果内容长度超过了对话框内容区域的显示，则会自动出现滚动条。    
    除此之外，还有一些常用的选项，如：添加底部按钮栏、模式窗口屏蔽层等。    
    官方示例地址：http://jqueryui.com/demos/dialog/    
       
    ·参数（名称 : 参数类型 : 默认值）    
    autoOpen : Boolean : true     
      如果设置为true，则默认页面加载完毕后，就自动弹出对话框；相反则处理hidden状态。    
      初始：$('.selector').dialog({ autoOpen: false });    
      获取：var autoOpen = $('.selector').dialog('option', 'autoOpen');    
      设置：$('.selector').dialog('option', 'autoOpen', false);    
       
    bgiframe : Boolean : false     
      如果设置为true，则调用bgiframe插件，用于修复在IE6浏览器中无法显示于其它控件（select,flash）之上的问题。    
      初始：$('.selector').dialog({ bgiframe: true });    
      获取：var bgiframe = $('.selector').dialog('option', 'bgiframe');    
      设置：$('.selector').dialog('option', 'bgiframe', true);    
       
    buttons : Object : { }    
      为对话框添加相应的按钮及处理函数。    
      初始：$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });    
      获取：var buttons = $('.selector').dialog('option', 'buttons');    
      设置：$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });    
       
    closeOnEscape : Boolean : true   
      设置当对话框打开的时候，用户按ESC键是否关闭对话框。    
      初始：$('.selector').dialog({ closeOnEscape: false });    
      获取：var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');    
      设置：$('.selector').dialog('option', 'closeOnEscape', false);    
       
    dialogClass : String : ''   
      设置指定的类名称，它将显示于对话框的标题处。    
      初始：$('.selector').dialog({ dialogClass: 'alert' });    
      获取：var dialogClass = $('.selector').dialog('option', 'dialogClass');    
      设置：$('.selector').dialog('option', 'dialogClass', 'alert');    
       
    draggable : Boolean : true   
      如果设置为true，则允许拖动对话框的标题栏移动窗口。    
      初始：$('.selector').dialog({ draggable: false });    
      获取：var draggable = $('.selector').dialog('option', 'draggable');    
      设置：$('.selector').dialog('option', 'draggable', false);    
       
    height : Number : 'auto'   
      设置对话框的高度（单位：像素）。    
      初始：$('.selector').dialog({ height: 530 });    
      获取：var height = $('.selector').dialog('option', 'height');    
      设置：$('.selector').dialog('option', 'height', 530);    
       
    hide : String : null   
      使对话框关闭（隐藏），可添加动画效果。    
      初始：$('.selector').dialog({ hide: 'slide' });    
      获取：var hide = $('.selector').dialog('option', 'hide');    
      设置：$('.selector').dialog('option', 'hide', 'slide');    
       
    maxHeight : Number : false   
      设置对话框的最大高度（单位：像素）。    
      初始：$('.selector').dialog({ maxHeight: 400 });    
      获取：var maxHeight = $('.selector').dialog('option', 'maxHeight');    
      设置：$('.selector').dialog('option', 'maxHeight', 400);    
       
    maxWidth : Number : false   
      设置对话框的最大宽度（单位：像素）。    
      初始：$('.selector').dialog({ maxWidth: 600 });    
      获取：var maxWidth = $('.selector').dialog('option', 'maxWidth');    
      设置：$('.selector').dialog('option', 'maxWidth', 600);    
       
    minHeight : Number : 150    
      设置对话框的最小高度（单位：像素）。    
      初始：$('.selector').dialog({ minHeight: 300 });    
      获取：var minHeight = $('.selector').dialog('option', 'minHeight');    
      设置：$('.selector').dialog('option', 'minHeight', 300);    
       
    minWidth : Number : 150    
      设置对话框的最小宽度（单位：像素）。    
      初始：$('.selector').dialog({ minWidth: 400 });    
      获取：var minWidth = $('.selector').dialog('option', 'minWidth');    
      设置：$('.selector').dialog('option', 'minWidth', 400);    
       
    modal : Boolean : false   
      是否为模式窗口。如果设置为true，则在页面所有元素之前有个屏蔽层。    
      初始：$('.selector').dialog({ modal: true });    
      获取：var modal = $('.selector').dialog('option', 'modal');    
      设置：$('.selector').dialog('option', 'modal', true);    
       
    position : String, Array : 'center'   
      设置对话框的初始显示位置。可选值: 'center', 'left', 'right', 'top', 'bottom', 或是一个数组['right','top']    
      初始：$('.selector').dialog({ position: 'top' });    
      获取：var position = $('.selector').dialog('option', 'position');    
      设置：$('.selector').dialog('option', 'position', 'top');    
       
    resizable : Boolean : true   
      设置对话框是否可以调整大小。    
      初始：$('.selector').dialog({ resizable: false });    
      获取：var resizable = $('.selector').dialog('option', 'resizable');    
      设置：$('.selector').dialog('option', 'resizable', false);    
       
    show : String : null   
      用于显示对话框。    
      初始：$('.selector').dialog({ show: 'slide' });    
      获取：var show = $('.selector').dialog('option', 'show');    
      设置：$('.selector').dialog('option', 'show', 'slide');    
       
    stack : Boolean : true   
      设置移动时对话框是否前置于其它的对话框前面。    
      初始：$('.selector').dialog({ stack: false });    
      获取：var stack = $('.selector').dialog('option', 'stack');    
      设置：$('.selector').dialog('option', 'stack', false);    
       
    title : String : ''   
      指定对话框的标题，也可以在对话框附加元素的title属性中设置标题。    
      初始：$('.selector').dialog({ title: 'Dialog Title' });    
      获取：var title = $('.selector').dialog('option', 'title');    
      设置：$('.selector').dialog('option', 'title', 'Dialog Title');    
       
    width : Number : 300    
      设置对话框的宽度（单位：像素）。    
      $('.selector').dialog({ width: 460 });    
      获取：var width = $('.selector').dialog('option', 'width');    
      设置：$('.selector').dialog('option', 'width', 460);    
       
    zIndex : Integer : 1000    
      设置对话框的zindex值。    
      初始：$('.selector').dialog({ zIndex: 3999 });    
      获取：var zIndex = $('.selector').dialog('option', 'zIndex');    
      设置：$('.selector').dialog('option', 'zIndex', 3999);    
       
       
    ·事件    
    beforeclose : dialogbeforeclose    
      当对话框关闭之前，触发此事件。如果返回false，则对话框仍然显示。    
      初始：$('.selector').dialog({ beforeclose: function(event, ui) { ... } });    
      绑定：$('.selector').bind('dialogbeforeclose', function(event, ui) { ... });    
       
    open : dialogopen    
      当对话框打开后，触发此事件。    
      初始：$('.selector').dialog({ open: function(event, ui) { ... } });    
      绑定：$('.selector').bind('dialogopen', function(event, ui) { ... });    
       
    focus : dialogfocus    
      当对话框获取焦点时，触发此事件。    
      初始：$('.selector').dialog({ focus: function(event, ui) { ... } });    
      绑定：$('.selector').bind('dialogfocus', function(event, ui) { ... });    
       
    dragStart : dragStart    
      当开始拖拽对话框移动时，触发此事件。    
      初始：$('.selector').dialog({ dragStart: function(event, ui) { ... } });    
      绑定：$('.selector').bind('dragStart', function(event, ui) { ... });    
       
    drag : drag    
      当拖拽对话框移动时，触发此事件。    
      初始：$('.selector').dialog({ drag: function(event, ui) { ... } });    
      绑定：$('.selector').bind('drag', function(event, ui) { ... });    
       
    dragStop : dragStop    
      当拖拽对话框动作结束时，触发此事件。    
      初始：$('.selector').dialog({ dragStop: function(event, ui) { ... } });    
      绑定：$('.selector').bind('dragStop', function(event, ui) { ... });    
       
    resizeStart : resizeStart    
      当开始改变对话框大小时，触发此事件。    
      初始：$('.selector').dialog({ resizeStart: function(event, ui) { ... } });    
      绑定：$('.selector').bind('resizeStart', function(event, ui) { ... });    
       
    resize : resize    
      当对话框大小改变时，触发此事件。    
      初始：$('.selector').dialog({ resize: function(event, ui) { ... } });    
      绑定：$('.selector').bind('resize', function(event, ui) { ... });    
       
    resizeStop : resizeStop    
      当对话框大小改变结束时，触发此事件。    
      初始：$('.selector').dialog({ resizeStop: function(event, ui) { ... } });    
      绑定：$('.selector').bind('resizeStop', function(event, ui) { ... });    
       
    close : dialogclose    
      当对话框关闭后，触发此事件。    
      初始：$('.selector').dialog({ close: function(event, ui) { ... } });    
      绑定：$('.selector').bind('dialogclose', function(event, ui) { ... });    
       
       
    ·属性    
    destroy    
      销毁对话框对象。    
      用法：.dialog( 'destroy' )    
       
    disable    
      禁用对话框。    
      用法：.dialog( 'disable' )    
       
    enable    
      启用对话框。    
      用法：.dialog( 'enable' )    
       
    option    
      获取或设置对话框的属性。    
      用法：.dialog( 'option' , optionName , [value] )    
       
    close    
      关闭对话框。    
      用法：.dialog( 'close' )    
       
    isOpen    
      用于判断对话框是否处理打开状态。    
      用法：.dialog( 'isOpen' )    
       
    moveToTop    
      将对话框移至最顶层显示。    
      用法：.dialog( 'moveToTop' )    
       
    open    
      打开对话框。    
      用法：.dialog( 'open' )
      

  2.   


    <script type="text/javascript">   
        $(function(){
                 $('#dialog').dialog({
         autoOpen: false,//如果设置为true，则默认页面加载完毕后，就自动弹出对话框；相反则处理hidden状态。 
         bgiframe: true, //解决ie6中遮罩层盖不住select的问题  
         width: 600,
         modal:true,//这个就是遮罩效果   
         buttons: {
          "Ok": function() { 
                            $.ajax({   
                                    type: "post",  
                                    contentType: "application/json;utf-8",
                                    url: "default2.aspx/GetDate",   
                                    data: "{str:\"" + $("#TextBox2").val() + "\"}",
                                    success: function(msg) {
                                    alert(msg.d.SuccessMsg); 
                                      $("#TextBox1").empty();
                                    $("#TextBox1").val(msg.d.SuccessMsg);
                                    },   
                                    error:function(msg){   
                                         alert( "Error: " + msg );   
                                    }   
                                 });   
           $(this).dialog("close");}, 
          "Cancel": function() { 
           $(this).dialog("close"); 
          } 
         }
        });
         $('#loading').dialog({
         autoOpen: false,//如果设置为true，则默认页面加载完毕后，就自动弹出对话框；相反则处理hidden状态。 
         bgiframe: true, //解决ie6中遮罩层盖不住select的问题  
         width: 300,
         modal:true,//这个就是遮罩效果   
         resizable:false,
         dialogClass: 'alert' 
         
        });
        
                 $('#btn').click(function(){
         $('#dialog').dialog('open');
         return false;
        });
        
       $("#btnAjax").click(function()   
                {   
                $.ajax({   
                    type: "post",  
                    contentType: "application/json;utf-8",
                    url: "default2.aspx/GetDate",   
                    data: "{str:\"" + $("#TextBox1").val() + "\"}",
                    success: function(msg) {
                    alert(msg.d.SuccessMsg); 
                    },   
                    error:function(msg){   
                         alert( "Error: " + msg );   
                    }   
                 });   
               });   
               
                //对与Ajax的监控，本身是全局性的dialog( 'disable' )    
                $(document).ready(function() {
                 $('#loading').ajaxStart(function(){
         $(this).dialog('open');
        }).ajaxStop(function() {
                        $(this).dialog('close');
                    });
                 });
           });
          
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="demo">
            <div>
                <input type="button" id="btn" value="点我啊" />
                <div>
                    <div id="dialog" title="嘿嘿">
                        <p>
                            这里是内容！</p>   <asp:TextBox ID="TextBox2" runat="server" ></asp:TextBox>
                    </div>
                </div>
            </div>
        </div>
        <input type="button" value="ajax获取" id="btnAjax" />
        <span id="dt"></span>
        <div id="tdiv">
        </div>
        <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
        <div id="loading" style="border: 1px solid #808080; width: 300px; height: 50px; display: none;">
            <p>
                正在加载～</p>
        </div>
        </form> [WebMethod]
        public static CallbackMessage GetDate(string str)
        {
            CallbackMessage msg = new CallbackMessage();
            msg.IsSuccess = true;
            msg.SuccessMsg = "成功！" + str;
            return msg;
        }
      

  3.   

    [WebMethod]
        public static CallbackMessage GetDate(string str)
        {
            CallbackMessage msg = new CallbackMessage();
            msg.IsSuccess = true;
            msg.SuccessMsg = "成功！" + str;
            return msg;
        }菜鸟问一下。这个代码写在哪？
      

  4.   

    你写这个有嘛用?
    没看出来.你说的那些dialog本身就可以.