头部加入
:
<link type="text/css" href="jquery-ui-1.7.2.custom/css/south-street/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-ui-1.7.2.custom/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom/js/jquery-ui-1.7.2.custom.min.js"></script>
其中:
css/south-street 可以根据需要选用别的样式(从 http://jqueryui.com/themeroller/
下载)。
加入脚本
<script language="javascript">
$(function(){
// Dialog
$('#dialog_status').dialog({
autoOpen: false,
width:500, modal:false, overlay:{ opacity:0.1,background:"#ffffff" },
buttons: {
"确定": function() {
// $(this).dialog("close");
DoImplHandOver( ); // 自定义的函数
},
"取消": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
// 加入了显示效果
$('#dialog_status').show("slow");
if ( check_HasChecked( "opt_one" ) == false )
{ alert( "没有选中记录!" ); return }
// 定位
var X = $('#Submit2').position().left;
var Y = $('#opt_all').position().top;
// $('#dialog_status').dialog("option", "position", [ 'center',Y ] )
$('#dialog_status').dialog("option", "position", [ X,Y ] )
$('#dialog_status').dialog('open');
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
//-->
</script>
页面元素
:
按钮 dialog_link,点击时打开对话框
<div id="dialog_status" title="设定选定器具的承检状态">
对话框内容 .......
</div>
其他用法:
初始化:
$("#example").dialog( {
width:500,
position: { left,top },
modal: true ,
buttons: {
"确 定": function() { alert("Ok"); },
"关 闭": function() { $(this).dialog("close"); }
}
});
分享到:
相关推荐
仿 JQuery Dialog 登录页面 htm css div 简洁
简单的jquery dialog实现插件,使用简单,自行修改样式
jQuery dialog对话框插件点击弹出对话框代码 jQuery dialog对话框插件点击弹出对话框代码
jQuery Dialog jQuery DialogjQuery DialogjQuery DialogjQuery DialogjQuery DialogjQuery Dialog
JQuery UI Dialog 弹出框以及清楚数据
一款不错的jQueryDialog 插件使用范例,有需要的请查看
jquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialog
jqueryAlert confirm prompt 将jqueryDialog改成prompt形式
基于 jquery 项目中 用到的dialog弹出层 一种弹出层
Jquery中dialog属性的小计,详细介绍dialog的使用
NULL 博文链接:https://lishuaishuai.iteye.com/blog/1267230
两个版本:一个替换ui close按钮,对三个按钮设立同样css;一个不替换,修改ui的css文件;完美打开多个对话框,并可以分别控制最大最小关闭。jquery文件没有包含进来。
jquery dialog css3弹出对话框插件实例 jquery dialog css3弹出对话框插件实例
全面的jquery dialog 细节 包括参数 包 css 等等
18、jQuery弹出对话框jQuery插件Dialog
jquery Dialog 弹出框 上一个项目就是用的这个 很漂亮很实用
jQuery插件 dialog非常不错的弹出框控件
虽然项目未结项就转交了出去,但开始对JQuery产生了好感并爱不释手,于是决定将此项目正式更名为JQueryDialog。 本次更新将代码完全基于了JQuery框架,并应用了命名空间,让JS看起来有那么一点OO的感觉,同时修改了...
Jquery UI dialog 详解 (弹出层) 包含jquery弹出层的详细介绍,以及代码用例
jQuery Dialog弹出窗示例源码 源码描述: 一个用vb.net做的jQuery Dialog弹出窗, 有两种弹出窗,一种是内嵌弹出层,一种是iframe弹出层,适用各种web项目 欢迎感兴趣的用户下载学习