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

zhxzhs 2011-06-09 07:43:45 
<%@ 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>


...全文
6107 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
xcl06dx 2012-12-11
  • 打赏
  • 举报
 回复
举个设置标题背景颜色的例子嘛。
rebecca_best 2012-05-07
  • 打赏
  • 举报
 回复
jqury ui学习了~~
sunwenjunnet 2012-01-12
  • 打赏
  • 举报
 回复
貌似很牛叉的哦～～～强人啊
快乐的2 2011-06-16
  • 打赏
  • 举报
 回复
你写这个有嘛用?
没看出来.你说的那些dialog本身就可以.
showenxxx 2011-06-16
  • 打赏
  • 举报
 回复
*.aspx页面
晚宴后的素颜 2011-06-16
  • 打赏
  • 举报
 回复
[WebMethod]
public static CallbackMessage GetDate(string str)
{
CallbackMessage msg = new CallbackMessage();
msg.IsSuccess = true;
msg.SuccessMsg = "成功！" + str;
return msg;
}

菜鸟问一下。这个代码写在哪？
xuexiaodong2009 2011-06-10
  • 打赏
  • 举报
 回复
强人啊
失去乐山贼 2011-06-10
  • 打赏
  • 举报
 回复
- -！顶。
一经注册不得修改 2011-06-10
  • 打赏
  • 举报
 回复
算不得原创,有时间还是从头写一个吧
zhxzhs 2011-06-09
  • 打赏
  • 举报
 回复 

<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;

    }

zhxzhs 2011-06-09
  • 打赏
  • 举报
 回复

需要注意：
1. 不用再button上加onclick方法，把所有的function都加到 $(function(){});里面。
2. 需要引入三个文件，其中两个js，一个css

Jquery 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' )
jQuery+ui自由拖动浮动层
jQuery+ui自由拖动浮动层
jQuery-UI和jsPlumb实现拖拽连接模型demo下载
利用jQuery-UI和jsPlumb实现拖拽连接模型
JavaScript+jQuery+项目实战系列视频教程
JavaScript jQuery 项目实战系列教程 能掌握JS和Jquery的基本技能，能完成基本的网页特效！
可拖拽的bootstrap弹出窗口
可拖拽的bootstrap弹出窗口结合jquery-ui实现的弹出和拖拽效果。
Jquery+.net实现图像缩放截取
Jquery+.net实现图像缩放截取（类似开心网） 好不容易完成了一个基于web2.0概念的项目管理系统，在系统的实现过程中用到了头像的缩放裁剪的功能模块，而且我发现在网络上很少有讨论这方面的文章，所以把我的实现方式贴出来，和大家分享一下，写的不好还请多多海涵。 我是用jquery ui的ui.draggable实现的。当然，本文所实现的方法不局限于jquery ui，只要能实现拖动的功能，任何库都可以。我用的jquery ui的版本号是1.6，这个版本已经改了很多的bug，渐趋完善，老实说以前的有些版本代码bug非常多，现在代码质量有了一定的提高，尤其bug改了不少。这个ui库完全兼容jquery的语法，也就是说隐式迭代、超级强大的selector等都可以无缝的使用，这比起dojo，ext等组件库使用起来要更为方便和轻量些。
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章