bootstrap 弹出包含iframe模态窗口的修改
2016-06-13 09:31
549 查看
HTML:
<!-- 模态框(Modal) -->
<div class="modal fade" id="NoPermissionModal">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
统计图
</h4>
</div>
<div class="modal-body">
<iframe id="NoPermissioniframe" width="100%" height="100%" frameborder="0" ></iframe>
</div>
</div>
</div>
</div>
js:
//弹出统计图表方法
///frameSrc:url地址,otitle:标题,cssobj:弹出框大小样式设置 默认800*620,cssifm:iframe样式
function showtip(frameSrc,otitle,cssobj,cssifm){
$("#NoPermissioniframe").attr("src", frameSrc);
$('#NoPermissionModal').modal({ show: true, backdrop: 'static' });
var _scrollHeight = $(document).scrollTop();
var wHeight = $(window).height();
var this_height;
if(cssobj&&cssobj["height"])
this_height=cssobj["height"];
else
this_height="620";
var this_top=(wHeight-this_height)/2+_scrollHeight+"px";
var this_top=(wHeight-this_height)/2+"px";
var mycss=cssobj||{"width":"800px","height":"620px","top":this_top};
var myifmcss=cssifm||{};//iframe样式
$('#NoPermissionModal .modal-dialog').css(mycss).find('.modal-content').css({height: '100%',width: '100%'}).find('h4').html(otitle||"").end().find('.modal-body').css({height: '85%'}).find("#NoPermissioniframe").css(myifmcss);;
}
//关闭方法
function close()
{
$('#NoPermissionModal').modal('hide');
}
<!-- 模态框(Modal) -->
<div class="modal fade" id="NoPermissionModal">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
统计图
</h4>
</div>
<div class="modal-body">
<iframe id="NoPermissioniframe" width="100%" height="100%" frameborder="0" ></iframe>
</div>
</div>
</div>
</div>
js:
//弹出统计图表方法
///frameSrc:url地址,otitle:标题,cssobj:弹出框大小样式设置 默认800*620,cssifm:iframe样式
function showtip(frameSrc,otitle,cssobj,cssifm){
$("#NoPermissioniframe").attr("src", frameSrc);
$('#NoPermissionModal').modal({ show: true, backdrop: 'static' });
var _scrollHeight = $(document).scrollTop();
var wHeight = $(window).height();
var this_height;
if(cssobj&&cssobj["height"])
this_height=cssobj["height"];
else
this_height="620";
var this_top=(wHeight-this_height)/2+_scrollHeight+"px";
var this_top=(wHeight-this_height)/2+"px";
var mycss=cssobj||{"width":"800px","height":"620px","top":this_top};
var myifmcss=cssifm||{};//iframe样式
$('#NoPermissionModal .modal-dialog').css(mycss).find('.modal-content').css({height: '100%',width: '100%'}).find('h4').html(otitle||"").end().find('.modal-body').css({height: '85%'}).find("#NoPermissioniframe").css(myifmcss);;
}
//关闭方法
function close()
{
$('#NoPermissionModal').modal('hide');
}
相关文章推荐
- Bootstrap进度条
- 全面解析Bootstrap中Carousel轮播的使用方法
- 全面解析Bootstrap中tooltip、popover的使用方法
- Bootstrap应用基本模板
- 开源JEE企业通用框架 (Bootstrap javascript spring boot)
- 基于bootstrap的后台二级垂直菜单
- Bootstrap之表格checkbox复选框全选
- Bootstrap警告
- Bootstrap缩略图thumbnail
- bootstrap源码分析之Carousel
- BOOtstrap源码分析之 tooltip、popover
- Bootstrap超大屏幕和页面标题
- Bootstrap分页,标签和微章
- Bootstrap网格系统
- Bootstrap表单按钮图标
- Bootstrap排版
- Bootstrap排版
- Bootstrap导航栏
- bootstrap-table 显示行号,分页有效
- bootstrap-datepicker 插件修改为默认中文 - cnhxz