ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryポップアップログインウィンドウの実装 code_jquery

jqueryポップアップログインウィンドウの実装 code_jquery

WBOY
WBOYオリジナル
2016-05-16 18:38:14844ブラウズ

メインレイヤーは左右中央揃えで、ウィンドウの幅を2で割った値から自分のレイヤーの幅を2で割った値を左に設定しました。スクロール バーの非表示のスクロールトップに 50 ピクセルを加えたものに等しい固定トップ;

イベントがこのクラスをトリガーするとき、最初に 2 つのレイヤーが本文に追加されているかどうかを確認します。そうでない場合は、トリガーされるたびに増加し続けます。 。 title、content、width、height、cssNameの5つのパラメータが設定されており、それぞれレイヤータイトルのスタイル名、レイヤー内のコンテンツ、レイヤーの幅、レイヤーの高さ、レイヤーのコンテンツを定義します。レイヤー内のコンテンツは、url、text、id、iframe の 4 つの読み込みメソッドで設定されます。ターゲット URL の HTML コンテンツは、get または post を通じてイベントおよび id にコンテンツを直接書き込みます。ページ内のIDを取得することで、内部のHTMLがポップアップレイヤーに表示され、iframeはレイヤー内のフレームにターゲットURLが表示されることを認識します。多くの場合、ポップアップ レイヤーのコンテンツ スタイルもさまざまであるため、パラメーター cssName が追加され、これを使用してレイヤー内のコンテンツを配置できます。

1. ポップアップ レイヤーの HTML は次のとおりです。

コードをコピーしますは次のとおりです。



title

閉じるgt;

content
gt;

/div>


対応するスタイルは次のとおりです: コードは次のとおりです。


#floatBoxBg {
display:none;
height:100%;
background:# 000;
位置:絶対;
上:0;
}
ボーダー:#0C7FDA 5px ソリッド;
位置:絶対;
上:50%;
z-index:1000;
.floatBox .title {
高さ:23px;
パディング:7px 10px 0;
color:#fff;
background-image:url(../images/dialog_bg.gif);繰り返し: 繰り返し-x;
背景 -位置: 0px 0px;
.floatBox .title h4 {
float:left;
マージン:0;
font-size:14px;
line-height:16px;
}
.floatBox .title スパン {
float:right; align:middle;
margin-bottom :2px;
.floatBox .content {
padding:20px 15px;

2 番目のポップアップ ウィンドウ js ファイルは次のとおりです:




コードをコピー


コードは次のとおりです:

// JavaScript Document

var dialogFirst=true;
function dialog(title,content,width,height,cssName){

if(dialogFirst==true){
var temp_float=new String;
temp_float="
";
temp_float ="
";
temp_float ="

";
temp_float ="
";
temp_float ="
";
$("body").append(temp_float);
dialogFirst=false;
}

$("#floatBox .title span").click(function(){
$("#floatBoxBg").animate({opacity:"0"},"normal",function(){$(this).hide();});
$("#floatBox").animate({top:($(document).scrollTop()-(height=="auto"?300:parseInt(height))) "px"},"normal",function(){$(this).hide();});
});

$("#floatBox .title h4").html(title);
contentType=content.substring(0,content.indexOf(":"));
content=content.substring(content.indexOf(":") 1,content.length);
switch(contentType){
case "url":
var content_array=content.split("?");
$("#floatBox .content").ajaxStart(function(){
$(this).html("loading...");
});
$.ajax({
type:content_array[0],
url:content_array[1],
data:content_array[2],
error:function(){
$("#floatBox .content").html("error...");
},
success:function(html){
$("#floatBox .content").html(html);
}
});
break;
case "text":
$("#floatBox .content").html(content);
break;
case "id":
$("#floatBox .content").html($("#" content "").html());
break;
case "iframe":
$("#floatBox .content").html("");
}

$("#floatBoxBg").show();
$("#floatBoxBg").animate({opacity:"0.5"},"normal");
$("#floatBox").attr("class","floatBox " cssName);
$("#floatBox").css({display:"block",left:(($(document).width())/2-(parseInt(width)/2)) "px",top:($(document).scrollTop()-(height=="auto"?300:parseInt(height))) "px",width:width,height:height});
$("#floatBox").animate({top:($(document).scrollTop() 50) "px"},"normal");
}

三,参数说明
顺序 参数 功能 备注
1 title 弹出层的标题 必填,纯文本
2 content 弹出层的内容 :url get或post某一页面里的html,该页面要求只包含body的子标签
:text 直接写入内容
:id 显示页面里某id的子标签
:iframe 层内内容以框架显示
3 width 弹出层的宽 必填,css值,比如“200px”
4 height 弹出层的高 如上,但是可用“auto”
5 cssName 弹出层的css 给id floatBox加入的样式名,层内样式可以通过这个样式名来定制

四,应用
dialog(title,content,width,height,cssName);
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。