网站开发流程中网站制作包括,免费ppt模板软件哪个好,网站建设服务开税率多少的票,中国建筑集团网我需要完成的效果#xff1a; 1.在顶级页面打开模态框#xff0c;并且遮罩层也要再顶级页面 2.单击遮罩层部分#xff0c;模态框不关闭 问题描述#xff1a; 不知为什么#xff0c;可能是bootstrap前端框架添加遮罩层的一些问题。通过子页面在顶级页面打开模态框#xff…我需要完成的效果 1.在顶级页面打开模态框并且遮罩层也要再顶级页面 2.单击遮罩层部分模态框不关闭 问题描述 不知为什么可能是bootstrap前端框架添加遮罩层的一些问题。通过子页面在顶级页面打开模态框modal遮罩层竟然只在子页面显示。 如下效果 1.主页面代码 !DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlelink relstylesheet hrefcss/bootstrap.css //headbodytable width100% height720px border1 trtdiframe idiframe1 nameiframe1 srciframe1.html width100% height100%/iframe/tdtd/td/trtrtd/tdtdiframe nameiframe2 srciframe2.html width100% height100%/iframe/td/tr/tableinput typetext idtextId value234 /script typetext/javascript srcjs/jquery.js /scriptscript typetext/javascript srcjs/bootstrap.js /script/body
/html 2.子页面代码 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlelink relstylesheet hrefcss/bootstrap.css //headbodydiv font color#000000 size4听一场摇滚和耳朵一起一醉方休br /喝一圈烈酒让酒腻子们闻风丧胆br /开一场cosplay party二次元万岁br /摸一下大蜥蜴我熊胆威风凌厉br /吃三斤驴打滚翻滚吧肠胃br /飚一把摩托车成为风驰电掣的女王br /见一下微博红人感受马伯庸亲王的慈祥/font/divscript typetext/javascript srcjs/jquery.js /scriptscript typetext/javascript srcjs/bootstrap.js /scriptscript typetext/javascript$(document).ready(function() {openModal();});//打开模态框function openModal(){var fatherBody $(window.top.document.body);var id pages;var dialog $(# id);if (dialog.length 0) {dialog $(div classmodal fade roledialog id id /);dialog.appendTo(fatherBody);}dialog.load(model.html, function() {dialog.modal();});}/script/body
/html 注window.top获取顶级页面的window对象 问题在于遮罩层渲染完后查看遮罩层代码如下div idbackdropId classmodal-backdrop fade in/div 1.子页面修改代码如下 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlelink relstylesheet hrefcss/bootstrap.css //headbodydiv font color#000000 size4听一场摇滚和耳朵一起一醉方休br /喝一圈烈酒让酒腻子们闻风丧胆br /开一场cosplay party二次元万岁br /摸一下大蜥蜴我熊胆威风凌厉br /吃三斤驴打滚翻滚吧肠胃br /飚一把摩托车成为风驰电掣的女王br /见一下微博红人感受马伯庸亲王的慈祥/font/divscript typetext/javascript srcjs/jquery.js /scriptscript typetext/javascript srcjs/bootstrap.js /scriptscript typetext/javascript$(document).ready(function() {openModal();closeModal();});//打开模态框function openModal(){var fatherBody $(window.top.document.body);var id pages;var dialog $(# id);if (dialog.length 0) {dialog $(div classmodal fade roledialog id id /);dialog.appendTo(fatherBody);}dialog.load(model.html, function() {dialog.modal({backdrop: false});});fatherBody.append(div idbackdropId classmodal-backdrop fade in/div);}//关闭模态框function closeModal(){var fatherBody $(window.top.document.body);fatherBody.find(#pages).on(hidden.bs.modal, function (e) {fatherBody.find(#backdropId).remove();});}/script/body
/html 主要方面 1.openModal()closeModal()两个方法在子页面绑定的关系顶级页面模态框的打开和关闭方法。openModal方法在顶级页面添加的遮罩层的html代码而closeModal给顶级页面的模态框对象绑定了hidden.bs.modal事件在该事件中移除的遮罩层 的html代码。 2. dialog.load(model.html, function() { dialog.modal({ backdrop: false }); });中的backdrop:false实现了再遮罩层点击不再关闭模态框的功能 修改后的效果 个人试过其他的很多方式最终这是最简单最方便的如果有人想去看bootstrap的代码去修改个人十分佩服但由于个人工作问题只能浅尝辄止。 项目源码下载地址http://pan.baidu.com/s/1qWTm4e4 参考网站地址http://bootstrap.evget.com/javascript.html#modals 转载于:https://www.cnblogs.com/chengxuyuanzhilu/p/5132328.html
