dialog基础①

最新推荐文章于 2021-05-27 04:16:38 发布

做一个有信仰de人

最新推荐文章于 2021-05-27 04:16:38 发布

阅读量165

点赞数

分类专栏：问题

问题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

导入两个jquert的百度云链接：https://pan.baidu.com/s/1i6JWwtf 密码：7f2e

转载代码：

<SCRIPT type="text/javascript" src="js/jquery-1.4.4.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.layout.js"></SCRIPT>
<link type="text/css" href="css/redmond/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<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>

自己写：

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "utf-8" 
  > 
 
 
  < 
  title 
  >模态窗口 
  </ 
  title 
  > 
 
 
  < 
  script 
  type= 
  "text/javascript" 
  src= 
  "jquery-3.3.1.js" 
  ></ 
  script 
  > 
 
 
  < 
  script 
  type= 
  "text/javascript" 
  src= 
  "jquery-ui-1.12.1.js" 
  ></ 
  script 
  > 
 

 
  < 
  script 
  language= 
  "javascript" 
  type= 
  "text/javascript" 
  > 
 

 
  // function xx() { 
 
 
  // $(document).ready(function(){$("#dialog").dialog();}); 
 
 
  // } 
 
 
  $( 
  document). 
  ready( 
  function() { 
 
 
  $( 
  '#dialog'). 
  dialog({ 
 
 
  autoOpen: 
  false, 
 
 
  width: 
  600, 
 
 
  height: 
  260, 
 

 
  buttons: { 
 
 
  "确定" 
  : 
  function() { 
 
 
  $( 
  this). 
  dialog( 
  "close") ; 
 

   }, 
 
 
  "取消" 
  : 
  function() { 
 
 
  $( 
  this). 
  dialog( 
  "close") ; 
 

   } 
 

   }, 
 
 
  closeOnEscape: 
  false, 
 
 
  graggable: 
  false, 
 
 
  resizable: 
  false, 
 
 
  //是否为模态窗口 
 
 
  modal: 
  true, 
 
 
  title: 
  "修改密码", 
 

   }); 
 
 
  $( 
  '#dialog_link'). 
  click( 
  function(){ 
 
 
  $( 
  '#dialog'). 
  dialog( 
  'open'); 
 
 
  return 
  false; 
 

   }); 
 

   }); 
 
 
 
 
  < 
  / 
  script 
  > 
 

 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  a 
  href= 
  "#" 
  id= 
  "dialog_link" 
  >修改密码 
  </ 
  a 
  > 
 
 
  < 
  div 
  id= 
  "dialog" 
  > 
 
 
  < 
  p 
  >hehe 
  </ 
  p 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 