利用jQuery DsDialog實現彈出框插件代碼



47 187 63



特效描述:利用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.cqetom.live")},"info.png");
	});
	$("#demo7").click(function(){
		ds.dialog.confirm("是否回到51前端首頁",function(){window.location.href='http://www.cqetom.live'},function(){alert("逗比,為什么不回到首頁?")});
	});
	$("#demo8").click(function(){
		ds.dialog.prompt("請輸入51前端網址!",function(){alert("51前端 - www.cqetom.live")},"www.cqetom.live");
	});
	$("#demo9").click(function(){
		ds.dialog.tips("51前端 - www.cqetom.live",2,true,true);
	});
});	
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 浮動提示框 浮動菜單 浮動導航 文字提示框 提示文字
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子