用juqery写的弹窗

原创 2012年03月28日 20:59:14
<!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>

<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css" />

<script type="text/javascript">

 //当窗体加载完毕的时候 触发该匿名函数
 //$(document) //把dom对象转换成jQuery对象
 //$(document).ready(function(){}) 
  $(function(){
	  
	 $("#dialog").dialog({
		 
		 autoOpen:false, //设置对话框打开的方式 不是自动打开
		 show:"bilnd",
		 
		 hide:"explode",
		 
		 modal:true, //遮罩效果 true是遮罩 false是不能遮罩
		 
/*		 buttons:{
			 
			 "确定":function(){
				 //alert("提交");
				 $(this).dialog("close");
				 },
			  "取消":function(){
				  
				  alert("确定取消吗?");
				  }
			 
			 },
*/

            buttons:[{
				
				 text:"ok",
				 
				 click:function(){
					 
					$(this).dialog("close"); 
				 }
					 
				},
					 
			{
					text:"取消",  
					  
					click:function(){
						
					$(this).dialog("close"); 
						}
					  
				
				}],






			 draggable:false, //是否可以拖动
		     closeOnEscape:false,//是否采用esc键退出对话框 如果为false不可用
			 
			 title:"添加用户界面",//添加对话框的标题
			 position:"top",//对话框弹出的位置 可以是center top left right bottom 默认是center
			 width:600,//对话框的高度
		 
		     height:300
			 
		 });
	 //触发链接事件 当你点击 链接 打开一个对话框
	 $("#dialog_link").click(function(){
		
		$("#dialog").dialog("open"); //open参数 作用 打开对话框
		 })
	 //怎么干获取数值的modal值
	 var modalValue=$("#dialog").dialog("option","modal");
	 
	 
	 //怎么设置option中的参数值
	 
	 $("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对话框 $("#dialog").dialog()他就成了一个对话框 在页面中就会隐藏-->
  <div id="dialog" title="nihao">
  hello!
  
  </div>
</body>
</html>


自己写了一个jQuery的弹出层,非常非常简单

非常简单的 jquery 弹出层
  • djk8888
  • djk8888
  • 2016年09月09日 10:42
  • 6122

event.srcElement获得引发事件的控件(表单)

function getInput() { var inputs = document.getElementsByTagName("input"); //取得所有的input表...
  • Fanbin168
  • Fanbin168
  • 2014年07月25日 22:58
  • 1565

纯css写弹窗 html

css background-color: #fff; border: 5px solid rgba(0, 0, 0, 0.4); height: 250px; lef...
  • qq_22823581
  • qq_22823581
  • 2017年09月19日 13:44
  • 324

用JavaScript编写弹出层原理分析及初步实现

目录        基本原理        具体步骤        完整实例代码        兼容性检查        总结 基本原理        利用JS编写弹出层,关键是...
  • guaguapi_ndsc
  • guaguapi_ndsc
  • 2012年09月07日 05:46
  • 851

JQuery实现的弹窗效果

这是笔者实际项目中的一个需求,我们先来看看特效。页面加载时弹出窗口,点击关闭案例,窗口消失并呈现动画效果。 实现代码如下: ...
  • Rongbo_J
  • Rongbo_J
  • 2015年06月19日 16:20
  • 1631

用avalon写的一个弹窗demo

之前项目中,用avalon写的一个模块,单独拿出来了,一个小弹窗的效果。 demo地址: http://www.hui12.com/nbin/demo/4a/4a.html html: ...
  • nbin2008
  • nbin2008
  • 2016年06月05日 22:41
  • 6485

使用jQuery实现弹出框效果

一,背景 由于在项目中需要用到的一个页面效果是弹出框,在项目中我使用jquery的ui插件,来实现这个功能,用法也比较简单 二,准备环境 1)引入jquery插件。 在index.ht...
  • smart_seed
  • smart_seed
  • 2016年11月28日 18:38
  • 5888

写弹窗

begin applivation.showmainform:=false;//隐藏窗体 reg:=tregistry.create; reg.rootkey:=HKEY_LOC...
  • lizhaocn
  • lizhaocn
  • 2013年12月11日 10:19
  • 210

手机弹窗组件(原生js)

Demo:http://liuyanzhi08.github.io/components/modal/ Repo: https://github.com/liuyanzhi08/swipe /**...
  • liuyanzhi08
  • liuyanzhi08
  • 2015年04月28日 19:02
  • 1687

用bootstrap写弹窗,页面抖动问题

后来发现是因为多次引用bootstrap模板,modal-open用了好多次
  • cs123951
  • cs123951
  • 2016年01月13日 11:33
  • 421
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用juqery写的弹窗
举报原因:
原因补充:

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