jquery ui对话框实例代码
目前JqueryUI提供的对话框支持使用相对比较的方便,示例代码如下所示:
代码如下:
<body>
<form id="form1" runat="server">
<div id="dlg">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<asp:Button ID="Showdlg" runat="server" Text="..." />
</form>
<script type="text/javascript" language="javascript">
$(function () {
$("#dlg").dialog({
autoOpen: false,
closed: true,
width: 450,
modal: true,
appendTo: "form",
buttons: {
"OK": function () {
$("form").submit();
},
"Cancle": function () {
$(this).dialog("close");
}
},
close: function () {
}
});
$("#<%=Showdlg.ClientID%>").button().click(function() { $("#dlg").dialog("open"); return false });
}
);
</script>
</body>
其中值得注意的是appendTo: "form"选项, JqueryUI Dialog默认情况向会将表示对话框的<div id="dlg">添加到Body上,这样当表单提交时,服务端就无法获取到对话框中的服务器控件相关的值了。
相关推荐
-
jquery 模式对话框终极版实现代码
页面滚动时随着滚动条固定在屏幕的中央,模式对话框中的内容为两种,一是iframe引入,一是HTML语句插入.在网站开发中十分常用,使用该插件十分的简单.来看一下运行效果.插件使用 1.首先引入样式文件,详细代码如下所示: <link href="images/blue/css.css" rel="stylesheet" type="text/css" id="showdialogcss" /> 着里面的id一定不要
-
jQuery Dialog 弹出层对话框插件
原理很简单,通过JS动态构建一个div层,将其插入到body中,然后通过调整position的CSS属性为absolute或fixed,使其脱离原来的文档流的位置.再通过适当的加工美化就成了. 复制代码 代码如下: <!-- 背景遮盖层 --> <div class="dialog-overlay"></div> <!-- 对话框 --> <div class="dialog"> <div class
-
jQuery代码实现对话框右上角菜单带关闭×
先给大家展示下效果图,具体效果图如下所示,如果大家觉得还不错,请参考实现代码: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery对话框右上角带关闭× - 何问起</title><base target="_blank" /> <!-- Attach our CSS -->
-
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
jQuery是一款当之无愧的JS开源框架,凭借其小巧实用占领了很大的开发市场,jQuery另外一个优势就是拥有丰富多彩的插件,这些插件可以帮助你简化很多的开发过程.下面介绍的6款实用jQuery小插件及源码,希望大家喜欢. 1.jQuery智能单词提示工具 这是一款可以根据当前输入智能提示单词的插件,效果很棒. 在线演示 /源码下载 2.CSS3实现的Photoshop按钮效果 这是用jQuery和CSS3实现的Photoshop按钮效果. 在线演示 /源码下载 3.jQuery自定义确认对话框
-
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
我们在天猫进行购物的时候,经常会碰到单击删除按钮或者登陆按钮后,弹出对话框问你是否删除或者弹出一个登陆对话框,并且我们也是可以看到我们之前页面的信息,就是点击不了,只有对对话框进行操作后才有相应的变化.截图如下(以天猫为例) 如图所示,上面就是天猫的效果图,其实这就是通过jQuery实现的,并且实现的过程也不是很不复杂,那么现在就让我们来看看实现的过程吧. 首先是页面的布局部分:delete.html 复制代码 代码如下: <!DOCTYPE html> <html> <h
-
Confirmer JQuery确认对话框组件
插件截图: 用途:点击链接或按钮时要确认是否继续当前操作. 插件代码: 复制代码 代码如下: (function($){ $.fn.confirmer = function(options){ var defaults = { msg:"Are you sure to delete it ?" } var options = $.extend(defaults, options); var control=$(this); $(control).click(function(){ret
-
jQuery EasyUI API 中文文档 - Dialog对话框
扩展自 $.fn.window.defaults,用 $.fn.dialog.defaults 重写了 defaults. 依赖 window linkbutton 用法 复制代码 代码如下: <div id="dd" title="My Dialog" style="width:400px;height:200px;"> Dialog Content. </div> 复制代码 代码如下: $('#dd').dialog(
-
JQuery弹出炫丽对话框的同时让背景变灰色
这段时间在做开发时,用到了JQuery弹出炫丽对话框,背景变灰色.特地和大家分享分享. 先看效果图: 代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src=&q
-
jquery删除提示框弹出是否删除对话框
复制代码 代码如下: /** * 删除草稿 */ function deleteDraft(the,id){ $.messager.confirm('删除草稿提醒', '</br>确定删除这篇草稿吗?</br></br>',function(r){ if(r){ $.ajax({ type : "post", url : "http://localhost:8090/webplus3/_web/sns/delBlog.do?_p=YXM9M
-
基于Jquery的开发个代阴影的对话框效果代码
复制代码 代码如下: <script type="text/javascript" src="http://img.zzl.com/script/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function() { $("#open").click(function() { openDialo
-
jQuery UI Dialog 创建友好的弹出对话框实现代码
主要参数 jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: {"确定":function(){},"取消":function(){}} [{text:"确定", click: function(){}},{text:"取消",click:function(){}}] 3.mod
-
学习从实践开始之jQuery插件开发 对话框插件开发
前言: 之所以写下这篇文章,是想将我的想法分享给大家:对于初学者,我希望他能从这篇文章中获取对他有用的东西,对于经验丰富的开发者,我希望他能指出我的不足,给我更多的意见和建议:目的就是共同进步. 一.要做什么插件? 我想要实现一个插件可以取代浏览器默认的弹出对话框或窗体,就是我们通过调用window.alert,window.confirm,window.prompt这些方法 所弹出的网页对话框,通过调用window.open,window.showModalDialog,window.show
-
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
复制代码 代码如下: //confirm function Confirm(msg, control) { $.messager.confirm("确认", msg, function (r) { if (r) { return true; } }); return false;} 复制代码 代码如下: //Loadfunction Load() { $("<div class=\"da
-
Jquery实现页面加载时弹出对话框代码
复制代码 代码如下: <script type="text/javascript" src="jquery-1.4.2.js"></script> //下载 <script type="text/javascript"> $(document).ready(function(){ alert("您好,欢迎来到Jquery!"); }) </script> 将以上代码置于head标
-
jQuery Mobile的loading对话框显示/隐藏方法分享
显示loading对话框方法是: 复制代码 代码如下: $.mobile.showPageLoadingMsg(); 也可设置参数 复制代码 代码如下: $.mobile.showPageLoadingMsg("b","加载中",false); 隐藏loading对话框方法是: 复制代码 代码如下: $.mobile.hidePageLoadingMsg();
-
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
插件说明 - jBox 是一款基于 jQuery 的多功能对话框插件,能够实现网站的整体风格效果,给用户一个新的视觉享受. 运行环境 - 兼容 IE6+.Firefox.Chrome.Safari.Opera 等主流浏览器. 使用授权 - jBox 永久免费使用,但是必须保留相关的版权信息.如果有好的建议,可以直接在下面留言. 版本:2.3 大小:19.8k 下载:点击下载 在线demo:http://www.kudystudio.com/jbox/jbox-demo.html [2011-11
随机推荐
- MySQL备份与恢复之保证数据一致性(5)
- 浅谈js的解析顺序 作用域 严格模式
- Oracle11g简单安装和使用教程
- Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
- asp.net下XML的加密和解密实现方法
- php mysql insert into 结合详解及实例代码
- PHP模块memcached使用指南
- thinkphp中html:list标签传递多个参数实例
- 一波实用的Bash Shell整理
- JavaScript中的FileReader图片预览上传功能实现代码
- 网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
- 探讨js字符串数组拼接的性能问题
- java实现高效的枚举元素集合示例
- 详解Android中ListView实现图文并列并且自定义分割线(完善仿微信APP)
- 解析Nginx中的日志模块及日志基本的初始化和过滤配置
- java实现字符串反转
- Android开发之splash界面下详解及实例
- PHP5各个版本的新功能和新特性总结
- PHP编程中的常见漏洞和代码实例
- Android开发实现的Intent跳转工具类实例