无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-07-10 23:52 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

无需申请自动送彩金68滚动条的问题,Bootstrap模态

今日碰着的题目是,在弹出层前边的 遮罩层,因为有滚动条,导致滚动条上边不可视区域未有遮罩层,化解办法是加的css。

BootStrap模态框轻便概述

模态框(Modal)是覆盖在父窗体上的子窗体。经常,指标是显得来自四个独自的源的内容,能够在不离开父窗体的图景下有一点并行。子窗体可提供消息、交互等。

js代码

Bootstrap Modals(模态框)是利用定制的 Jquery 插件创制的。它能够用来创造模态窗口充分用户体验,只怕为用户增加实用成效。您能够在 Modals(模态框)中采纳 Popover(弹出框)和 Tooltip(工具提示插件)。

一经你想要单独援用该插件的效能,那么你必要引用 modal.js。或然,正如 Bootstrap 插件大概浏览 一章中所提到,您能够援引 bootstrap.js 或压缩版的 bootstrap.min.js。
1、用法
您能够切换模态框(Modal)插件的隐形内容:
因而 data 属性:在调控器成分(比如开关只怕链接)上安装属性 data-toggle="modal",相同的时间安装 data-target="#identifier" 或 href="#identifier" 来钦点要切换的特定的模态框(带有 id="identifier")。
通过 JavaScript:使用这种技巧,您能够由此轻松的一行 JavaScript 来调用带有 id="identifier" 的模态框:
$('#identifier').modal(options)
2、轻便实例

<script type="text/javascript"> 

//显示灰色JS遮罩层 

function showBg(ct,content){



var bH=$(document).height(); 

var bW=$("body").width() 16; 

var objWH=getObjWh(ct); 

$("#fullbg").css({width:bW,height:bH,display:"block"}); 

var tbT=objWH.split("|")[0] "px"; 

var tbL=objWH.split("|")[1] "px"; 

$("#dialog").show();

$("#" ct).css({top:tbT,left:tbL,display:"block"}); 



$(window).scroll(function(){resetBg()}); 

$(window).resize(function(){resetBg()}); 

} 

function getObjWh(obj){ 

var st=document.documentElement.scrollTop;//滚动条距顶部的距离 

var sl=document.documentElement.scrollLeft;//滚动条距左边的距离 

var ch=document.documentElement.clientHeight;//屏幕的高度 

var cw=document.documentElement.clientWidth;//屏幕的宽度 

var objH=$("#" obj).height();//浮动对象的高度 

var objW=$("#" obj).width();//浮动对象的宽度




var objT=Number(st) (Number(ch)-Number(objH))/2; 

var objL=Number(sl) (Number(cw)-Number(objW))/2; 

return objT "|" objL; 

} 

function resetBg(){ 

var fullbg=$("#fullbg").css("display"); 

if(fullbg=="block"){ 

var bH2=$("body").height(); 

var bW2=$("body").width() 16; 

$("#fullbg").css({width:bW2,height:bH2}); 

var objV=getObjWh("dialog"); 

var tbT=objV.split("|")[0] "px"; 

var tbL=objV.split("|")[1] "px"; 

$("#dialog").css({top:tbT,left:tbL}); 

} 

} 




//关闭灰色JS遮罩层和操作窗口

function closeBg(){ 

$("#fullbg").css("display","none"); 

$("#dialog").css("display","none");

} 




</script>

1,Bootstrap 模态对话框和轻便利用

div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<p>对话框主体</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">取消</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>
</div>
</div>

css代码

div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<p>对话框主体</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">取消</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>
</div>
</div> 

能够应用开关或链接间接调用模态对话框,那是轻便的用法:

#fullbg{ 

background-color: Gray; 

display:none; 

z-index:3; 

left:0px; 

opacity:0.5; top:0; left:0;height:100%; width:100%; z-index:999; position:fixed; _position:absolute; _left: expression_r(documentElement.scrollLeft   documentElement.clientWidth - this.offsetWidth); _top: expression_r(documentElement.scrollTop   documentElement.clientHeight - this.offsetHeight);

filter:Alpha(Opacity=30); 

opacity: 0.3; 

} 




#dialog { 

width:560px; 

background:#eee; 

display: none; 

z-index: 5; 

padding:16px;

font-size:12px;

z-index:1000; position:absolute;

}

#dialog sup{ color:#f00;}

#dialog .close0{ position:relative; top:-24px; left:544px; height:38px; width:40px;}

可以应用按键或链接间接调用模态对话框,那是简约的用法:

复制代码 代码如下:

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:无需申请自动送彩金68滚动条的问题,Bootstrap模态

关键词: 开户送38体验金