jquery中dialog下的属性讲解


<!-- 基础类库 -->
<SCRIPT type="text/javascript" src="js/jquery-1.4.4.min.js"></SCRIPT>
<!-- 布局的基本类库(不涉及到布局不需要)-->
<SCRIPT type="text/javascript" src="js/jquery.layout.js"></SCRIPT>
<!-- ui的样式表 -->
<link type="text/css" href="css/redmond/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<!-- ui的类库 --> 
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(function () {
  //制定某个div的id 将其作为 Dialog   
  $('#helpdialog').dialog({
     //是否创建就打开对话框,也就是是否页面一打开就显示对话框
     autoOpen: false,
     
     /*是否需要解决无法覆盖IE6 select 元素无法被覆盖的bug
     就是在IE6下  div无法覆盖<select></select> 是否使用那该属性解决
     */
     bgiframe:true,
     
     //设置对话框宽度
     width: 600,
     
     //设置对话框高度
     height: 260,
     
     /*
      设置对话框底部的按钮
     */
     buttons: {
      "确定": function() {
       //单击按钮后的回调函数,就是按钮被单击后的响应事件
       $(this).dialog("close");
      }
      /*
      "取消": function() {
       $(this).dialog("close");
      }
      */
     },
     
     /*
      是否为对话框添加ESC快捷键
     */
     //closeOnEscape: false,
     
     //对话框是否可以被拖动
     draggable:false,
     
     //打开对话框时是否使用特效
     show:"slide",
     //关闭对话框时是否使用特效动画
     hide: "slide",
     
     //是否可以调整对话框的大小
     resizable:false,
     
     //调整对话框的高度和宽度极限值(当resizable:true时)
     //maxHeight:520
     //maxWidth:620
     //minHeight:320
     //minWidth:220
     
     //是否为模态窗口,设置为 true 时,页面上其它元素将被覆盖且无法响应用户操作。也就是无法再主界面上进行其他操作
     modal:true,
     
     //是否可覆盖其它对话框
     //stack:false
     
     //对话框标题(也可以再div的title上进行设置)
     title:"请登陆"
     
     //设置对话框 CSS z-index 值
     //zIndex:50
    });
    // 对话框的打开连接
    $('#helpdialog_link').click(function(){
     $('#helpdialog').dialog('open');
     return false;
    });
});
</SCRIPT>
<BODY> 
<a href="#" id="dialog_link">从此处打开对话框</a></span>
 <div id="helpdialog" title="对话框的标题">
  <p>对话框的内容</p>
 </div>
</BODY>
posted @ 2020-07-08 09:55  yangqqq  阅读(533)  评论(0编辑  收藏  举报