jQuery可拖动弹出层对话框代码



142 565 189



特效描述: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

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