您的位置：首页 > Web前端 > BootStrap

自定义bootstrap 弹出层插件

2016-09-07 17:57 288 查看

自己做了一个弹出层，隔一段时间自动退出的效果——该效果基于bootstrap控件开发。

<body>
<div id="huangbiao" onclick="abc()">sdadsafdsaf</div>
</body>
<script src="../js/jquery.min.js"></script>
<!-- Bootstrap v3.3.4 核心 JavaScript 文件 -->
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/sqh_style_v2.0.css">
<script>
function abc(){
//设置自动提示窗口的配置信息
var setting = {
//提示的内容
content : "弹出提示内容dsafdsafdsa"
};

//弹出提示信息
sqh_tips(setting);
}

//添加弹出提示信息，之后就自动消失
function sqh_tips(mysetting){

var setting = {
//提示的内容
content : "弹出提示内容",
//指明弹出窗口的内容
width : "200px",
//显示的时间
persistent : 1000,
//显示回调函数
beforeShow : function(obj){
//                alert(obj.outerHTML);
//删除添加的节点
$(obj).remove();
},
//退出的时间
hide:300
};

//获取用户的配置文件
setting = $.extend(setting,mysetting);

function addHtml(setting){
var contentHtml ='<div id="'+setting.target+'">'+
'<div style="position: fixed;top:30%;width: 100%;z-index:1050;" id="__dialog_div">'+
'<div style="position: relative;width: '+setting.width+';margin:0px auto;" onclick="remove()">'+
'<div class="alert alert-info">'+
setting.content+
'</div>'+
'</div>'+
'</div>'+
'<div class="modal-backdrop fade in" id="__zhezhao"></div>'+
'</div>';
//将遮罩效果代码添加到body标签中
$("body").append(contentHtml);
//让弹出内容有进入 和 退出的效果
$("#"+setting.target).show().delay(setting.persistent).hide(setting.hide,function(){
setting.beforeShow(this);
});
}

//如果传递的参数不正确，则
if(typeof setting != "object"){
setting.content = "参数传递有误";
}

//添加代码，弹出效果
addHtml(setting);
}

</script>

备注：

由于时间问题，自我感觉需要优化的方向：

1、使用new方法只产生一个对象，而不是每次都调用该方法

2、利用产生的对象，调用自身的show 和 hidden方法，不用来回的添加和删除节点

3、应该有三个阶段 —— 初始化阶段回调函数、显示前阶段回调函数、显示后阶段回调函数。

大小: 8.5 KB
查看图片附件

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

自定义bootstrap 弹出层 插件

自定义bootstrap 弹出层插件