jQuery dialog对话框

最新推荐文章于 2025-05-31 11:02:14 发布

原创最新推荐文章于 2025-05-31 11:02:14 发布 · 850 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #dialog

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用jQuery创建和操作dialog对话框，包括添加动画效果来增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本的dialog：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 对话框（Dialog） - 默认功能</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>
<div id="dialog" title="基本的对话框">
  <p>这是一个默认的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p>
</div>  
</body>
</html>

为dialog打开和关闭加上特效动画：

effect: "clip",	//可取值blind,clip,drop,explode,fold,puff,slide,scale,size,pulsate

例如：

<div id="dialog" title="Basic dialog">
  <p>这是一个动画显示的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p>
</div>
 
<button id="opener">打开对话框</button>

<script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
 
    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>

基本的模态：模态对话框防止用户与对话框以外的页面其他部分进行交互，直到对话框关闭为止。

添加模态覆盖屏幕，让对话框看起来更突出，因为它让页面上其他内容变暗。

<div id="dialog-confirm" title="清空回收站吗？"><p>这些项目将被永久删除，并且无法恢复。您确定吗？</p></div>
<script>

$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});

$("#bindContractDialog").dialog({
autoOpen:true,
height:400,
width:365,
resizable:false,
modal:true, //这里就是控制弹出为模态
buttons:{
"确定":function(){
//向后台提交数据
$.ajax({
async:false,
cache:true,
type: "POST",
data:{
goodsId:goodsId,
checker:checker,
checkAmount:checkAmount,
picture:checkPicture,
goodsNumber:goodsNumber
},
url: "goods_editGoods.do", //获取json数据
success: function(){
alert("绑定合同号成功");
},
error: function() {
alert("绑定合同号失败");
}
});

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