模拟dialog效果

最新推荐文章于 2024-11-12 15:43:20 发布

阿顿

最新推荐文章于 2024-11-12 15:43:20 发布

阅读量638

点赞数

文章标签： dialog function stylesheet class div ui

本文链接：https://blog.csdn.net/dunyanan1/article/details/7403934

版权

该博客介绍了如何使用jQuery UI库创建一个模拟对话框效果。通过为`div`元素添加特定类和ID，结合jQuery函数`$("#dialog").dialog()`，可以将普通元素转化为具有动画效果、可拖动、可调整大小的对话框。内容包括设置对话框的标题、内容、显示和关闭动画、是否可改变尺寸、是否可拖动等属性，并提供了打开和关闭对话框的方法。此外，还展示了如何获取和设置对话框选项的值。

摘要由CSDN通过智能技术生成

 <a id="dialog_link" class="ui-state-dfault ui-corner-all" href="##"><span> </span>open </a>    
  <!--div $("#dialog").dialog() 他就成了一个对话框 在页面中就会隐藏-->
 <div id="dialog" title=" 文本框中的title">
  文本框中的内容
 </div>

<script src="../jquery/jquery-1.7.1.js"></script>
<script src="../jquery/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入css-->
<link rel="stylesheet" href="../jquery/css/jquery-ui-1.8.18.custom.css" />
<script>
  $(function(){
	  //注册对话框
	   
	   $("#dialog").dialog({
		  autoOpen:false , //设置对话框的打开方式不是自动打开   
		  show:'blind', //打开时的动画效果
		  hide:'explode', //关闭时的动画效果
		  modal:true,  //遮罩效果   false 非遮罩效果
		  resizable:false,
		 /* buttons:{  //添加按钮操作
			  "确定"