利用jQuery DsDialog实现弹出框插件代码



42 164 55



特效描述:利用jQuery DsDialog实现弹出框插件代码,利用jQuery DsDialog实现弹出框插件代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/base.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/dsdialog.js"></script>

3. HTML代码

<div id="demo">
	<p><button id="demo1">标准调用</button></p>
    <p><button id="demo2">自定义图标</button></p>
    <p><button id="demo3">显示按钮</button></p>
    <p><button id="demo4">自定义按钮文字</button></p>
    <p><button id="demo5">支持回调事件</button></p>
    <p><button id="demo6">模拟alert弹出层</button></p>
    <p><button id="demo7">模拟confirm对话框</button></p>
    <p><button id="demo8">模拟prompt对话框</button></p>
    <p><button id="demo9">Tips方法调用</button></p>
</div>
<script type="text/javascript">
$(function(){
	$("#demo1").click(function(){
		ds.dialog({
		   title : '消息提示',
		   content : '你好,欢迎访问51前端!',
		   timeout:2	  
		});
	});
	$("#demo2").click(function(){
		ds.dialog({
		   title : '消息提示',
		   content : '你好,欢迎访问51前端!',
		   icon : "success.png",
		});
	});
	$("#demo3").click(function(){
		ds.dialog({
		   title : '消息提示',
		   content : '输入的数量不正确!',
		   onyes:true,
		   icon : "info.png",
		});
	});
	$("#demo4").click(function(){
		ds.dialog({
		   title : '消息提示',
		   content : '输入的数量不正确!',
		   yesText : '在线支付',
		   onyes:true,
		   noText:'分单结算',
		   onno:true,
		   icon:"question.gif",
		});
	});
	$("#demo5").click(function(){
		ds.dialog({
		   title : '消息提示',
		   content : '输入的数量不正确!',
		   yesText : '确定',
		   onyes:function(){
			   alert("你点击了确定!");
			   return false;
		   },
		   noText : '取消',
		   onno : function(){
			   alert("你点击了取消!");
			   this.close();
		   },
		   icon : "question.gif",
		});
	});
	$("#demo6").click(function(){
		ds.dialog.alert("模拟alert弹出层",function(){alert("51前端 - www.51qianduan.com")},"info.png");
	});
	$("#demo7").click(function(){
		ds.dialog.confirm("是否回到51前端首页",function(){window.location.href='http://www.51qianduan.com'},function(){alert("逗比,为什么不回到首页?")});
	});
	$("#demo8").click(function(){
		ds.dialog.prompt("请输入51前端网址!",function(){alert("51前端 - www.51qianduan.com")},"www.51qianduan.com");
	});
	$("#demo9").click(function(){
		ds.dialog.tips("51前端 - www.51qianduan.com",2,true,true);
	});
});	
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 浮动提示框 浮动菜单 浮动导航 文字提示框 提示文字

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到