jquery-dialog

原创 2012年03月28日 19:26:21
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--引入类库文件-->
<script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入Css样式类库文件-->
<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css"/>


<!---->
<script type="text/javascript">
  
      $(function(){
  
      $("#dialog").dialog({
    autoOpen:false , 
show:"blind",  
hide:"explode", 
modal:true, 


                  buttons:[
   {
text:"ok",
click:function(){
  $(this).dialog("close");
}
},
 {
text:"取消",
click:function(){
  $(this).dialog("close");
}
}],
                  draggable:true ,
 closeOnEscape:false ,
 title:"添加用户操作界面" ,
 position:"top", 
 width:600, 
 height:200, 
 resizable:false ,
 zIndex:6,
 drag:function(event,ui){
    
 }
  });
  
  
  $("#dialog_link").click(function(){
  $("#dialog").dialog("open"); 
  });
  
var modalValue = $("#dialog").dialog("option","modal");
 
  $("#dialog").dialog("option","modal",false);
 });




</script>


<style>
            #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
</style>
</head>


<body>


    <h1>模拟Dialog效果</h1>
    <a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>


    <div id="dialog"  title="hi!">
         hello!
    </div>
    </body>
</html>




调用函数




 $(function(){
  //注册对话框 
      $("#dialog").dialog({
    autoOpen:false , //设置对话框打开的方式 不是自动打开
show:"blind",  //打开时的动画效果
hide:"explode",  //关闭时的动画效果
modal:true, //遮罩效果true  false 非遮罩效果
/* buttons:{  //添加按钮的操作
  "确定":function(){
    $(this).dialog("close");//关闭对话框的操作
  },
"取消":function(){
 alert("取消的操作");
}
},
*/  //buttons的写法的第二种方式
                  buttons:[
   {
text:"ok",
click:function(){
  $(this).dialog("close");//关闭对话框的操作
}
},
 {
text:"取消",
click:function(){
  $(this).dialog("close");//关闭对话框的操作
}
}],
                  draggable:true ,//是否可以拖动的效果  true 可以拖动 默认值就是true  false代表不可以拖动
 closeOnEscape:false ,//是否采用esc键退出对话框 如果为false 则不采用 true 采用 默认值是true
 title:"添加用户操作界面" ,//对话框的标题
 position:"top", //对话框弹出的位置 可以使top left right center  bottom 默认值是 center
 width:600,  //对话框的宽度
 height:200, //对话框的高度
 resizable:false ,//是否可以改变的操作   false 则不可以改变尺寸  true可以改变尺寸   默认值是true
 zIndex:6,
 drag:function(event,ui){
    //可以测试出 对话框的当前坐标位置
 }
  });
  
  //触发连接的事件 当你点击 连接 打开一个对话
  $("#dialog_link").click(function(){
  $("#dialog").dialog("open"); //open参数  作用 打开对话框
  });
  
  
  //我怎么获取 我设置的options中的参数值
  var modalValue = $("#dialog").dialog("option","modal");
  //alert(modalValue);
  //我怎么设置options 中的参数值
  $("#dialog").dialog("option","modal",false);
 });





































基于jquery的dialog插件

  • 2013年02月14日 16:18
  • 69KB
  • 下载

jquery-dialog-drag.rar

  • 2015年10月15日 10:11
  • 36KB
  • 下载

jQuery UI Dialog组件实现简单的弹出层(modal)

关于jQuery UI Dialog组件实现简单的弹出层(modal)

jquery.dialog控件

  • 2010年02月23日 00:24
  • 140KB
  • 下载

jquery confirm dialog

  • 2016年01月14日 22:43
  • 22KB
  • 下载

Jquery中dialog使用小记

[javascript] view plaincopy $('#dialogDiv').dialog(    {    hide:true, //点击关闭是隐藏,如果...

jquery dialog 用法

  • 2011年10月18日 23:42
  • 97KB
  • 下载

Jquery_Dialog

  • 2014年08月27日 13:32
  • 168KB
  • 下载

Jquery中dialog属性小记

Jquery中dialog属性小记 2013-10-15 10:45 5943人阅读 评论(1) 收藏 举报  分类: JQuery [javasc...

Jquery_ui的dialog使用文档概述

  • 2013年01月20日 19:04
  • 48KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery-dialog
举报原因:
原因补充:

(最多只允许输入30个字)