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



198 790 264



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



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
admin
关注
TA的相关作品 >>更多
热搜关键词


热门标签: 图片拖动 右键菜单 图片头像上传 文字拖动 文字提示框 文件上传 拖动排序 提示框/弹出层 文本框 layer 下拉框 弹出层拖动 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 拖动拽动 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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