用jquery中插件dialog实现弹框效果

原创 2012年03月28日 16:51:50
<!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>
<style type="text/css">
#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>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.min.js">
</script>
<script type="text/javascript" language="javascript" src="jquery-ui-1.8.18.custom.min.js">
</script>
<link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.18.custom.css"/>
<script type="text/javascript" language="javascript">
$(function(){
	$("#dialog").dialog({
		autoOpen:false,
		buttons:[{
			text:"ok",
			click:function(){
				$("#dialog").dialog("close");
				}
			},
			{
			text:"cancal",
			click:function(){
				$("#dialog").dialog("close");
				}
			}
			],
			position:"top",//弹出位置
			width:600, //窗口宽度
			height:200,
			drag:function(){
				alert("你干拽我试试");
				}
			
		
		});
	$("#dialog_link").click(function(){
		$("#dialog").dialog("open");
		});
	})
</script>
</head>

<body>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
<!--对话框$("#dialog").dialog()他就是一个对话框,在页面中就会隐藏-->
<div id="dialog" title="Hi" style="display:none">
hello
</div>
</body>
</html>


Dialog弹出层Jquery插件多种效果版

  • 2014年11月14日 17:08
  • 69KB
  • 下载

jquery插件——模拟dialog效果案例

jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery 的全局函数就是属于jQuery...

jQuery插件--dialog效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档...

JqueryUI插件dialog实现遮罩的效果

JqueryUI插件dialog实现遮罩的效果 通过简单的学习了JqueryUI插件的一些内容,对于dialog对话框效果我们也有了一些简单的了解。那么,我来给大家介绍一下使用jqueryUI di...

jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)

1、拖曳插件——draggable 通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options...

IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层、Dialog的问题

程序猿都知道,IE6的使用情况在天朝还是挺普遍的,特别是在爱写日记的领导群中更加喜欢,如果我们做的网页上有下拉框、Div浮动层、Dialog之类的,会看到下拉选框总是把浮动区块div覆盖划破,bgif...

jquery multiselect插件实现下拉多选选框的效果

1、需要的下载的

基于jquery的一个Dialog插件

  • 2017年01月13日 16:29
  • 76KB
  • 下载

Dialog 插件 for Jquery

  • 2009年07月19日 10:24
  • 2KB
  • 下载

Jquery 插件 qtip 实现丰富的提示效果

在html中,我们如过实现 鼠标移到元素上给出提示的话,我们可以为每个元素增加title 属性。但是这样的提示不够美观,qtip的出现给我们增强效果提供了新的选择,官网地址如下 http://cra...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用jquery中插件dialog实现弹框效果
举报原因:
原因补充:

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