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

弹出框（tooltip）模态modal框的实现原理及Jquery的一个实现实例

2015-04-12 17:07 537 查看

弹出框（tooltip）模态modal框的实现原理及Jquery的一个实现实例

弹出框的实现原理

这个方法来源于他人博客，但是他的代码稍微有点问题，比如没有引入库，等，另外做了一些其他的小修改。

其实modal弹出框的实现原理就是用一个div（假设用overlay标识，即id=”overlay”）将整个页面覆盖，然后将overlay置灰，设置一定的透明度，在div1之上再放其他元素（即在overlay标签之后再添加标签），这些新的标签你依然可以操作且是原来的颜色，但是overlay之前的标签因为在div1之下(从图层上来说)，将被覆盖。

注意

当< div id =”overlay”>做为覆盖层，则此标签之前的标签，在 tooltip弹出后，都将被覆盖，overlay之后的标签，则如果style的position属性为absolute,则不会被覆盖。具体见代码。

另外如果想获得bootstrap库的一个比较炫的弹出框，可以访问w3cschool菜鸟网,一定要注意将该网站的div部分做为你的html 的最后一个标签，即放在最后。

自定义的tooltip实现原理代码块

@可以转载，但请说明出处
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>the principle of locking background</title>
<style>
#overlay{
position:absolute;
width:100%;
height:100%;
background:#000;
filter:alpha(opacity=50);
display:none;
}
#tooltip{
position:absolute;
width:700px;
height:380px;
background:#000;
border:4px solid #000;
margin: 102px 0 0 102px;
display:none;
}

div.footer {
position: absolute;

cursor:pointer;
width: 49px;
bottom: 3px;
right: 3px;
border-radius: 3px;
/*background:#6699ff;*/
padding:0 2px;
}
div.picture{
background-repeat:repeat;
position: absolute;
height: 300px;
left: 0px;
width: 690px;
border: 3px double #00000F;

}

button {
border-radius:5px;
background:#11AfAF;
border:5px double #003F48;
}

</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#addnew").css({
"cursor": "pointer"
});

$("#close").click(function () {
$("html").css({
"overflow": "auto"
});
$("#overlay").css({
"display": "none"
});
$("#tooltip").css({
"display": "none"
});
});
$("#addnew").click(function () {
var y = document.documentElement.scrollTop;
var x = document.documentElement.scrollLeft;
var px = document.body.clientWidth;
var py = document.body.clientHeight;
$("html").css({
"height": "100%",
"overflow": "hidden"
});
$("#overlay").css({
"display": "block",
"top": y,
"left": x,
"opacity":0.8
});
$("#tooltip").css({
"display": "block",
"top": 100,
"left": 200
});
});
})
</script>
</head>
<body>

<button id="test1" style="position:absolute;top: 20;left: 140px;" >overlay之前的任何元素被覆盖</button>
<div id="overlay"></div>

<div id="tooltip">
<div class="picture">
<img src="http://pic1.win4000.com/wallpaper/3/547599abe31d5.jpg" width="690" height="300">
</div>
<div class="footer">
<button id="close">关闭</button>
</div>
</div>
<button id="test2" style="position:absolute;top: 60px;left: 140px" >overlay之后的position:absolute元素不会被覆盖</button>
<button id="addnew"  style="position:absolute;top: 100px; left: 140px ;"><big> 锁定</big></button>

</body>
</html>

弹出框（tooltip）模态modal框的实现原理及Jquery的一个实现实例

弹出框（tooltip）模态modal框的实现原理及Jquery的一个实现实例

弹出框的实现原理

注意

自定义的tooltip实现原理代码块

目录