欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

可自己添加html的偽彈出框?qū)崿F(xiàn)代碼

 更新時(shí)間:2013年09月08日 16:18:46   作者:  
本文為大家介紹下html偽彈出框的實(shí)現(xiàn),感興趣的朋友可以了解下
js
復(fù)制代碼 代碼如下:

var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var browser=navigator.userAgent;
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var stop="";
var sleft="";
if(browser.indexOf('Chrome')!=-1){
stop=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else{
stop=document.documentElement.scrollTop;
sleft=document.documentElement.scrollLeft;
}
// windowWidth+=document.body.scrollLeft;
// windowHeight+=document.body.scrollTop;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2+stop,
"left": windowWidth/2-popupWidth/2+sleft
});
//only need force for IE6
//背景色
$("#backgroundPopup").css({
"height": windowHeight
});
}
//調(diào)用彈出框事件
function bb(str){
$("#download").show();
centerPopup();
loadPopup();
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!,點(diǎn)擊背景事件
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
}

html代碼(默認(rèn)隱藏)
復(fù)制代碼 代碼如下:

<div id="download" style="display: none;">
<div id="popupContact">
<!--自己的 HTML(body中)-->
</div>
<div id="backgroundPopup"></div>
</div>
</div>

相關(guān)文章

  • jQuery實(shí)現(xiàn)動(dòng)態(tài)粒子效果

    jQuery實(shí)現(xiàn)動(dòng)態(tài)粒子效果

    這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)粒子效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-03-03
  • jQuery+CSS實(shí)現(xiàn)的網(wǎng)頁二級(jí)下滑菜單效果

    jQuery+CSS實(shí)現(xiàn)的網(wǎng)頁二級(jí)下滑菜單效果

    這篇文章主要介紹了jQuery+CSS實(shí)現(xiàn)的網(wǎng)頁二級(jí)下滑菜單效果,涉及jquery鼠標(biāo)hover事件及show與hide操作頁面元素的顯示與隱藏效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-08-08
  • jQuery讀取本地的json文件(實(shí)例講解)

    jQuery讀取本地的json文件(實(shí)例講解)

    下面小編就為大家?guī)硪黄猨Query讀取本地的json文件(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-10-10
  • 喜大普奔!jQuery發(fā)布 3.0 最終版

    喜大普奔!jQuery發(fā)布 3.0 最終版

    jQuery發(fā)布已經(jīng)十年了,挺讓人難以置信。過去的這些年Web開發(fā)變了很多,jQuery也隨之變化著。在這個(gè)過程中,團(tuán)隊(duì)一直在對(duì)確保過往代碼的兼容支持和獲取最好的Web開發(fā)實(shí)踐的現(xiàn)實(shí)之間努力著。就在2天前,jQuery發(fā)布了新的3.0最終版本
    2016-06-06
  • jquery實(shí)現(xiàn)簡單實(shí)用的輪播器

    jquery實(shí)現(xiàn)簡單實(shí)用的輪播器

    這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡單實(shí)用的輪播器制作方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • jQuery插件的寫法分享

    jQuery插件的寫法分享

    這幾天在學(xué)習(xí)jQuery插件的寫法,搜索了一些資料,包括jQuery官方的示例,但發(fā)現(xiàn)描述的并不是很清晰。最后,終于搜索到一篇講解比較清晰的文章,這里自己總結(jié)了一下,并以一個(gè)具體的示例來說明jQuery插件的寫法
    2013-06-06
  • 深入理解jQuery之防止冒泡事件

    深入理解jQuery之防止冒泡事件

    下面小編就為大家?guī)硪黄钊肜斫鈐Query之防止冒泡事件。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-05-05
  • Jquery1.9.1源碼分析系列(六)延時(shí)對(duì)象應(yīng)用之jQuery.ready

    Jquery1.9.1源碼分析系列(六)延時(shí)對(duì)象應(yīng)用之jQuery.ready

    這篇文章主要介紹了Jquery1.9.1源碼分析系列(六)延時(shí)對(duì)象應(yīng)用之jQuery.ready的相關(guān)資料,需要的朋友可以參考下
    2015-11-11
  • jQuery 中使用JSON的實(shí)現(xiàn)代碼

    jQuery 中使用JSON的實(shí)現(xiàn)代碼

    json 是 Ajax 中使用頻率最高的數(shù)據(jù)格式,在瀏覽器和服務(wù)器中之間的通訊可離不開它
    2011-12-12
  • 用jQuery模擬頁面加載進(jìn)度條的實(shí)現(xiàn)代碼

    用jQuery模擬頁面加載進(jìn)度條的實(shí)現(xiàn)代碼

    因?yàn)槲覀儫o法通過任何方法獲取整個(gè)頁面的大小和當(dāng)前加載了多少,所以想制作一個(gè)加載進(jìn)度條的唯一辦法就是模擬。那要怎么模擬呢
    2011-12-12

最新評(píng)論