jQuery可拖動彈出層對話框代碼



149 595 199



特效描述:jQuery 可拖動彈出層 對話框代碼,jQuery可拖動彈出層對話框代碼

代碼結構

1. 引入CSS

<link href="css/dialog.css" rel="stylesheet"/>
<link href="css/dialog-theme.css" rel="stylesheet" type="text/css">

2. 引入JS

<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/dialog.js"></script>

3. HTML代碼

<div class="doc">
    <div class="btns">
        <button class="open btn" id="open">點擊我彈出層</button>
    </div>
</div>
<div class="dialog-demo-box" style="display:none;"></div>
<script>
$(function(){
	$("#open").click(function(){
		var $d = $(".dialog-demo-box");
		$d.dialog({
			title: '51前端',					// title
			dragable:true,
			html: '', 						// html template
			width: 400,					// width
			height: 200,				// height
			cannelText: '取消',		// cannel text
			confirmText: '確認',	// confirm text
			showFooter:true,
			onClose: function(){	// colse callback
			  alert('你點了關閉按鈕!');
			},
			onOpen: false,				// open callback
			onConfirm: function() { //  confirm callback required
				alert('你點了確認按鈕!');
				$d.dialog().close();
			},
			onCannel: function(){  	// Cannel callback
				alert('你點了取消按鈕!');
			},
			getContent:function(){ 	// get Content callback
				$d.find('.body-content').html('可拖動彈出層');
			}
		}).open();
	});
});
</script>



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


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 提示框/彈出層 彈出層拖動 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表