一区二区三区四区精品,综合国产在线,成人免费毛片aaaaaa片

導(dǎo)航首頁 ? 技術(shù)教程 ? jQuery 彈出層插件(推薦)

全站頭部文字我要出現(xiàn)在這里

jQuery 彈出層插件(推薦) 698 2024-03-03

最近在研究彈出層插件時發(fā)現(xiàn)網(wǎng)上很多插件功能很強大，同時插件也很龐大。在這里個人寫了一個比較秀珍的彈出層插件。

jquery.popdialog.js

$(function () {
$.fn.PopDialog = function (options) {
var defaults = {
Event: "click", //觸發(fā)響應(yīng)事件
title: "title", //彈出層的標題
type: "text", //彈出層類型(text、容器ID、URL、Iframe)
content: "content", //彈出層的內(nèi)容(text文本、容器ID名稱、URL地址、Iframe的地址)
width: 500, //彈出層的寬度
height: 400, //彈出層的高度
scrollTop: 200, //層滑動的高度也就是彈出層時離頂部滑動的距離
isAuto: false, //是否自動彈出
time: 2000, //設(shè)置自動彈出層時間，前提是isAuto=true
isClose: false, //是否自動關(guān)閉 
timeOut: 2000 //設(shè)置自動關(guān)閉時間，前提是isClose=true
};
var options = $.extend(defaults, options);
$("body").prepend("<div id='floatBoxBg'></div><div id='floatBox' class='floatBox'><div class='title'><h4></h4><span id='closeDialog'>X</span></div><div class='content'></div></div>");
var $this = $(this); //當(dāng)然響應(yīng)事件對象
var $blank = $("#floatBoxBg"); //遮罩層對象
var $title = $("#floatBox .title h4"); //彈出層標題對象
var $content = $("#floatBox .content"); //彈出層內(nèi)容對象
var $dialog = $("#floatBox"); //彈出層對象
var $close = $("#closeDialog"); //關(guān)閉層按鈕對象
var stc, st;
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {//判斷IE6
$blank.css({ height: $(document).height(), width: $(document).width() });
}
$close.live("click", function () {
$blank.animate({ opacity: "0" }, "normal", function () { $(this).hide(); });
$dialog.animate({ top: ($(document).scrollTop() - parseInt(options.height)) + "px" }, "normal", function () { $(this).hide(); });
if (st) {
clearTimeout(st); //清除定時器
}
if (stc) {
clearTimeout(stc); //清除定時器
}
});
$content.css("height", parseInt(options.height) - 70);
//文本框綁定事件
$this.live(options.Event, function (e) {
$title.html(options.title);
switch (options.type) {
case "url": //當(dāng)類型是地址的時候 
$content.ajaxStart(function () {
$(this).html("loading...");
});
$.get(options.content, function (html) {
$content.html(html);
});
break;
case "text": //當(dāng)類型是文本的時候
$content.html(options.content);
break;
case "id": //當(dāng)類型是容器ID的時候
$content.html($("#" + options.content + "").html());
break;
case "iframe": //當(dāng)類型是Iframe的時候
$content.html("<iframe src="http://www.gimoo.net/t/1902/5c74c2aa64003.html" + options.content + "" width="100%" height="" + (parseInt(options.height) - 70) + "px" + "" scrolling="auto" frameborder="0" marginheight="0" marginwidth="0"></iframe>");
break;
default: //默認情況下的時候
$content.html(options.content);
break;
}
$blank.show();
$blank.animate({ opacity: "0.5" }, "normal");
$dialog.css({ display: "block", left: (($(document).width()) / 2 - (parseInt(options.width) / 2)) + "px", top: ($(document).scrollTop() - parseInt(options.height)) + "px", width: options.width, height: options.height });
$dialog.animate({ top: options.scrollTop + "px" }, "normal");
if (options.isClose) {
stc = setTimeout(function () {
$close.trigger("click");
clearTimeout(stc);
}, options.timeOut);
}
});
if (options.isAuto) {
st = setTimeout(function () {
$this.trigger(options.Event);
clearTimeout(st);
}, options.time);
}
}
});

配套的css：

*
{
padding: 0;
margin: 0;
}
#floatBoxBg
{
display: none;
width: 100%;
height: 100%;
background: #000;
position: fixed !important; /*ie7 ff*/
position: absolute;
top: 0;
left: 0;
filter: alpha(opacity=0);
opacity: 0;
}
.floatBox
{
border: #9CC95F 5px solid;
position: fixed !important; /*ie7 ff*/
position: absolute;
top: 50px;
left: 40%;
background: #fff;
display: none;
}
.floatBox .title
{
height: 23px;
padding: 7px 10px 0;
color: #fff;
background-attachment: scroll;
background: #9CC95F;
background-repeat: repeat-x;
background-position: 0px 0px;
}
.floatBox .title h4
{
float: left;
padding: 0;
margin: 0;
font-size: 14px;
line-height: 16px;
}
.floatBox .title span
{
float: right;
cursor: pointer;
}
.floatBox .content
{
padding: 20px 15px;
background: #fff;
overflow-x: hidden;
overflow-y: auto;
}
#closeDialog
{
font-size: 20px;
font-weight: bold;
color: #000;
margin-top: -5px;
}
#closeDialog:hover
{
font-size: 20px;
font-weight: bold;
color: #fff;
margin-top: -5px;
}

最終的html示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://www.gimoo.net/t/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1902/jquery.popdialog.js"></script>
<link type="text/css" rel="stylesheet"  />
</head>
<body>
<div id="test">彈出層插件測試</div>
<div id="detail" style="display: none;">
歡迎各位網(wǎng)友使用彈出層插件demo
</div>
<script type="text/javascript">
$(function () {
$("#test").PopDialog({
Event: "click", //觸發(fā)響應(yīng)事件
title: "彈出層插件", //彈出層的標題
type: "id", //彈出層類型(text、容器ID、URL、Iframe)
content: "detail", //彈出層的內(nèi)容獲取(text文本、容器ID名稱、URL地址、Iframe的地址)
width: 500, //彈出層的寬度
height: 300, //彈出層的高度 
scrollTop: 200, //層滑動的高度也就是彈出層時離頂部滑動的距離
isAuto: true, //是否自動彈出
time: 2000, //設(shè)置彈出層時間，前提是isAuto=true
isClose: false, //是否自動關(guān)閉 
timeOut: 5000 //設(shè)置自動關(guān)閉時間，前提是isClose=true 
});
});
</script>
</body>
</html>

以上所述是小編給大家介紹的jQuery 彈出層插件(推薦)的相關(guān)知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對綠夏網(wǎng)網(wǎng)站的支持！

#免責(zé)聲明#

本站[綠夏技術(shù)導(dǎo)航]提供的一切軟件、教程和內(nèi)容信息僅限用于學(xué)習(xí)和研究目的；不得將上述內(nèi)容用于商業(yè)或者非法用途，否則，一切后果請用戶自負。本站信息來自網(wǎng)絡(luò)收集整理，版權(quán)爭議與本站無關(guān)。您必須在下載后的24個小時之內(nèi)，從您的電腦或手機中徹底刪除上述內(nèi)容。如果您喜歡該程序或內(nèi)容，請支持正版，購買注冊，得到更好的正版服務(wù)。我們非常重視版權(quán)問題，如有侵權(quán)請郵件[admin@lxwl520.com]與我們聯(lián)系進行刪除處理。敬請諒解！

文章分類