重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
如何关闭Jquery的弹出框colorbox
创新互联公司专注于巫溪企业网站建设,响应式网站开发,电子商务商城网站建设。巫溪网站建设公司,为巫溪等地区提供建站服务。全流程按需定制制作,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务
在项目中用到了colorbox这个组建,之前对这个并不了解,现在是需要自己调用colorbox的关闭功能,看了一下js的源码,还是有点迷糊。。通过查阅资料,还是实现了,
具体做法如下:
这个是弹出框,pop_pass这个表示点击的按钮的ID,limit表示弹出层的div的ID
$("#pop_pass").colorbox({width:"550",inline:true, href:"#limit"});
下面是关闭的语句:
$("#pop_pass").colorbox.close();
注意点:两个ID必须相同。。
有很多方法实现的,比如使用alert这种比较丑的弹框,比如
btn.click(function(){
window.alert('内容')
});
或者是自己自定义的弹框,那这样的话你至少得套三个div,比如
div-----这个绝对定位到整个页面,如position:absolute;top:0;left:0;right:0;bottom:0;
div-----这个在父级元素上面做绝对定位,也就是弹框的位置
div/div----弹框内容
/div
/div
或者是jQuery UI本身所附带的对话框功能,那个百度就出来了,不过不建议用那个,感觉比较丑,还是自己写一个好看
当然你也可以试着引入其他的UI框架,比如boot都有对话框的功能,不过建议自己写,用jQuery写也比较简单
使用jquery更改bootstrap弹出框的内容,可以使用Jquery的load()方法,动态加载不同的模态框(弹出框)内容,然后填充到页面的弹出框div中:
主页面只保留弹出框最外面的那个div
div class="modal fade" id="myModal" /div
动态加载的弹出框内容页面中包括bootstrap模态框中的head、body和footer部分
div class="modal-header"
h3模态框header /h3
/div
div class="modal-body"
p模态框body/p
/div
div class="modal-footer"
p模态框footer/p
/div
利用jquery的load()方法,在点击不同的按钮时动态先动态加载内容到模态框的div中,然后再让bootstrap显示
script
// 模态对话框隐藏时移除数据
$("#myModal").on("hidden", function() {
$(this).removeData("modal");
});
// 显示模态对话框
var showModal = function() {
var remote = "/test/showModal";
if (remote != "") {
$("#myModal").load(remote, function() {
$("#myModal").modal('show');
});
}};
/script
其中showModal函数可以由按钮控制。
最好用的弹出层是fancybox,它可以弹出来任何东西,可以是文本,可以是一个隐藏的节点,还可以是一个iframe,也就是说你只要写一个新的网页显示公告,这个链接上写上href=“公告网址”。然后给这个a写上一个class=“fancybox”,就可以直接jquery调用$("fancybox").fancybox();来初始化这个链接。初始化之后的链接再点击,就不会进行网页跳转,而是弹出一层进行加载,效果如图,还可以设置弹出动画、遮罩层、弹出层宽高、样式、透明度、居中、随窗口滚动居中等等。
JQuery的弹出提示框可以有两种方式
Alert 方式以及 Confirm 方式弹出
Alert方式的弹出提示框,只能有一种抉择,那就是确定,他这是一种不可选择的提示
Confirm方式,是带有选择功能的提示框,用户可以点击确定或者取消