ホームページ >ウェブフロントエンド >jsチュートリアル >Yourself_jquery で HTML 疑似ポップアップ ボックスの実装コードを追加できます。
Yourself_jquery で HTML 疑似ポップアップ ボックスの実装コードを追加できます。
- WBOYオリジナル
- 2016-05-16 17:23:121314ブラウズ
js
复制代码代码如下:
var PopupStatus = 0;
//jQuery マジックを使用してポップアップを読み込みます!
function loadPopup(){
//無効な場合にのみポップアップを読み込みます
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity ": "0.7"
});
$("#backgroundPopup").fadeIn("遅い");
$("#popupContact").fadeIn("遅い");
ポップアップステータス = 1;
}
}
//jQuery マジックでポップアップを無効にします!
function disablePopup(){
//有効な場合にのみポップアップを無効にします
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("遅い");
ポップアップステータス = 0;
}
}
//ポップアップをセンタリング
function centerPopup(){
//センタリングのためのデータを要求
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();
//センタリング
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2 stop,
"左": windowWidth/2-popupWidth/2 左
});
//IE6 の場合のみ強制が必要です
//背景色
$("#backgroundPopup").css({
"height": windowHeight
});
}
//调用弹出框イベント
function bb(str){
$("#download").show();
centerPopup();
loadPopup();
//ポップアップを閉じます
//x イベントをクリックしてください!
$("#popupContactClose").click(function(){
disablePopup();
});
//クリックアウトイベント!，点击背景イベント
$("#backgroundPopup").click(function(){
disablePopup();
});
//脱出イベントを押してください!
$(document).keypress(function(e){
if(e.keyCode==27 && PopupStatus==1){
disablePopup();
}
});
}
html代码（默认隐藏）
复制代 代码如下:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。