jquery彈出div對話方塊執行個體代碼

來源:互聯網
上載者:User

使用說明:

myHiddenDiv表示要彈出來的整體div

popup-body中的內容替換為你需要的內容

openStaticPopup();表示彈出div,鎖定介面

$.closePopupLayer(‘myStaticPopup’);表示關閉div,解鎖介面

<h2></h2>彈出div的標題

openStaticPopup中的width表示彈出div的寬度

其實就是細節上的調整

執行個體

 代碼如下 複製代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <title>Untitled</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="jquery.jmpopups-0.5.1.js"></script>
 <script type="text/javascript">
 //<![CDATA[
 $.setupJMPopups({
 screenLockerBackground: "#003366",
 screenLockerOpacity: "0.7"
 });
 
 function openStaticPopup() {
 $.openPopupLayer({
 name: "myStaticPopup",
 width: 400,
 target: "myHiddenDiv"
 });
 }
 //]]>
 </script>
 <style type="text/css" media="screen">
 #myHiddenDiv {display:none;}
 .popup {background:#FFF; border:1px solid #333; padding:1px;}
 .popup-header {height:24px; padding:7px; background:url("bgr_popup_header.jpg") repeat-x;}
 .popup-header h2 {margin:0; padding:0; font-size:18px; float:left;}
 .popup-header .close-link {float:right; font-size:11px;}
 .popup-body {padding:10px;}
 </style>
</head>
<body>
<a href="javascript:void();" onclick="openStaticPopup();" title="Static example">添加Flash資訊</a>
 <div id="myHiddenDiv">
 <div>
 <div>
 <h2>添加Flash資訊</h2>
 <a href="javascript:void();" onclick="$.closePopupLayer('myStaticPopup');" title="Close">Close</a>
 <br clear="all" />
 </div>
 <div>
 <table>
 <tr><td>選擇圖片</td><td>13123124124312413413</td></tr>
 <tr><td>選擇圖片</td><td>13123124124312413413</td></tr>
 <tr><td>選擇圖片</td><td>13123124124312413413</td></tr>
 <tr><td></td><td>提交</td></tr>
 </table>
 </div>
 </div>
 </div>
</body>
</html>

jmpopups代碼:

 代碼如下 複製代碼

(function($) {
 var openedPopups = [];
 var popupLayerScreenLocker = false;
 var focusableElement = [];
 var setupJqueryMPopups = {
 screenLockerBackground: "#000",
 screenLockerOpacity: "0.5"
 };
 
 $.setupJMPopups = function(settings) {
 setupJqueryMPopups = jQuery.extend(setupJqueryMPopups, settings);
 return this;
 }
 
 $.openPopupLayer = function(settings) {
 if (typeof(settings.name) != "undefined" && !checkIfItExists(settings.name)) {
 settings = jQuery.extend({
 width: "auto",
 height: "auto",
 parameters: {},
 target: "",
 success: function() {},
 error: function() {},
 beforeClose: function() {},
 afterClose: function() {},
 reloadSuccess: null,
 cache: false
 }, settings);
 loadPopupLayerContent(settings, true);
 return this;
 }
 }
 
 $.closePopupLayer = function(name) {
 if (name) {
 for (var i = 0; i < openedPopups.length; i++) {
 if (openedPopups[i].name == name) {
 var thisPopup = openedPopups[i];
 
 openedPopups.splice(i,1)
 
 thisPopup.beforeClose();
 
 $("#popupLayer_" + name).fadeOut(function(){
 $("#popupLayer_" + name).remove();
 
 focusableElement.pop();
 
 if (focusableElement.length > 0) {
 $(focusableElement[focusableElement.length-1]).focus();
 }
 
 thisPopup.afterClose();
 hideScreenLocker(name);
 });
 
 break;
 }
 }
 } else {
 if (openedPopups.length > 0) {
 $.closePopupLayer(openedPopups[openedPopups.length-1].name);
 }
 }
 
 return this;
 }
 
 $.reloadPopupLayer = function(name, callback) {
 if (name) {
 for (var i = 0; i < openedPopups.length; i++) {
 if (openedPopups[i].name == name) {
 if (callback) {
 openedPopups[i].reloadSuccess = callback;
 }
 
 loadPopupLayerContent(openedPopups[i], false);
 break;
 }
 }
 } else {
 if (openedPopups.length > 0) {
 $.reloadPopupLayer(openedPopups[openedPopups.length-1].name);
 }
 }
 
 return this;
 }
 
 function setScreenLockerSize() {
 if (popupLayerScreenLocker) {
 $('#popupLayerScreenLocker').height($(document).height() + "px");
 $('#popupLayerScreenLocker').width($(document.body).outerWidth(true) + "px");
 }
 }
 
 function checkIfItExists(name) {
 if (name) {
 for (var i = 0; i < openedPopups.length; i++) {
 if (openedPopups[i].name == name) {
 return true;
 }
 }
 }
 return false;
 }
 
 function showScreenLocker() {
 if ($("#popupLayerScreenLocker").length) {
 if (openedPopups.length == 1) {
 popupLayerScreenLocker = true;
 setScreenLockerSize();
 $('#popupLayerScreenLocker').fadeIn();
 }
 
 if ($.browser.msie && $.browser.version < 7) {
 $("select:not(.hidden-by-jmp)").addClass("hidden-by-jmp hidden-by-" + openedPopups[openedPopups.length-1].name).css("visibility","hidden");
 }
 
 $('#popupLayerScreenLocker').css("z-index",parseInt(openedPopups.length == 1 ? 999 : $("#popupLayer_" + openedPopups[openedPopups.length - 2].name).css("z-index")) + 1);
 } else {
 $("body").append("<div id='popupLayerScreenLocker'><!-- --></div>");
 $("#popupLayerScreenLocker").css({
 position: "absolute",
 background: setupJqueryMPopups.screenLockerBackground,
 left: "0",
 top: "0",
 opacity: setupJqueryMPopups.screenLockerOpacity,
 display: "none"
 });
 showScreenLocker();
 
 $("#popupLayerScreenLocker").click(function() {
 $.closePopupLayer();
 });
 }
 }
 
 function hideScreenLocker(popupName) {
 if (openedPopups.length == 0) {
 screenlocker = false;
 $('#popupLayerScreenLocker').fadeOut();
 } else {
 $('#popupLayerScreenLocker').css("z-index",parseInt($("#popupLayer_" + openedPopups[openedPopups.length - 1].name).css("z-index")) - 1);
 }
 
 if ($.browser.msie && $.browser.version < 7) {
 $("select.hidden-by-" + popupName).removeClass("hidden-by-jmp hidden-by-" + popupName).css("visibility","visible");
 }
 }
 
 function setPopupLayersPosition(popupElement, animate) {
 if (popupElement) {
 if (popupElement.width() < $(window).width()) {
 var leftPosition = (document.documentElement.offsetWidth - popupElement.width()) / 2;
 } else {
 var leftPosition = document.documentElement.scrollLeft + 5;
 }
 
 if (popupElement.height() < $(window).height()) {
 var topPosition = document.documentElement.scrollTop + ($(window).height() - popupElement.height()) / 2;
 } else {
 var topPosition = document.documentElement.scrollTop + 5;
 }
 
 var positions = {
 left: leftPosition + "px",
 top: topPosition + "px"
 };
 
 if (!animate) {
 popupElement.css(positions);
 } else {
 popupElement.animate(positions, "slow");
 }
 
 setScreenLockerSize();
 } else {
 for (var i = 0; i < openedPopups.length; i++) {
 setPopupLayersPosition($("#popupLayer_" + openedPopups[i].name), true);
 }
 }
 }
 
 function showPopupLayerContent(popupObject, newElement, data) {
 var idElement = "popupLayer_" + popupObject.name;
 
 if (newElement) {
 showScreenLocker();
 
 $("body").append("<div id='" + idElement + "'><!-- --></div>");
 
 var zIndex = parseInt(openedPopups.length == 1 ? 1000 : $("#popupLayer_" + openedPopups[openedPopups.length - 2].name).css("z-index")) + 2;
 }  else {
 var zIndex = $("#" + idElement).css("z-index");
 }
 
 var popupElement = $("#" + idElement);
 
 popupElement.css({
 visibility: "hidden",
 width: popupObject.width == "auto" ? "" : popupObject.width + "px",
 height: popupObject.height == "auto" ? "" : popupObject.height + "px",
 position: "absolute",
 "z-index": zIndex
 });
 
 var linkAtTop = "<a href='#' class='jmp-link-at-top' style='position:absolute; left:-9999px; top:-1px;'>&nbsp;</a><input class='jmp-link-at-top' style='position:absolute; left:-9999px; top:-1px;' />";
 var linkAtBottom = "<a href='#' class='jmp-link-at-bottom' style='position:absolute; left:-9999px; bottom:-1px;'>&nbsp;</a><input class='jmp-link-at-bottom' style='position:absolute; left:-9999px; top:-1px;' />";
 
 popupElement.html(linkAtTop + data + linkAtBottom);
 
 setPopupLayersPosition(popupElement);
 
 popupElement.css("display","none");
 popupElement.css("visibility","visible");
 
 if (newElement) {
 popupElement.fadeIn();
 } else {
 popupElement.show();
 }
 
 $("#" + idElement + " .jmp-link-at-top, " +
 "#" + idElement + " .jmp-link-at-bottom").focus(function(){
 $(focusableElement[focusableElement.length-1]).focus();
 });
 
 var jFocusableElements = $("#" + idElement + " a:visible:not(.jmp-link-at-top, .jmp-link-at-bottom), " +
 "#" + idElement + " *:input:visible:not(.jmp-link-at-top, .jmp-link-at-bottom)");
 
 if (jFocusableElements.length == 0) {
 var linkInsidePopup = "<a href='#' class='jmp-link-inside-popup' style='position:absolute; left:-9999px;'>&nbsp;</a>";
 popupElement.find(".jmp-link-at-top").after(linkInsidePopup);
 focusableElement.push($(popupElement).find(".jmp-link-inside-popup")[0]);
 } else {
 jFocusableElements.each(function(){
 if (!$(this).hasClass("jmp-link-at-top") && !$(this).hasClass("jmp-link-at-bottom")) {
 focusableElement.push(this);
 return false;
 }
 });
 }
 $(focusableElement[focusableElement.length-1]).focus();
 popupObject.success();
 
 if (popupObject.reloadSuccess) {
 popupObject.reloadSuccess();
 popupObject.reloadSuccess = null;
 }
 }
 
 function loadPopupLayerContent(popupObject, newElement) {
 if (newElement) {
 openedPopups.push(popupObject);
 }
 if (popupObject.target != "") {
 showPopupLayerContent(popupObject, newElement, $("#" + popupObject.target).html());
 } else {
 $.ajax({
 url: popupObject.url,
 data: popupObject.parameters,
 cache: popupObject.cache,
 dataType: "html",
 method: "GET",
 success: function(data) {
 showPopupLayerContent(popupObject, newElement, data);
 },
 error: popupObject.error
 });
 }
 }
 
 $(window).resize(function(){
 setScreenLockerSize();
 setPopupLayersPosition();
 });
 
 $(document).keydown(function(e){
 if (e.keyCode == 27) {
 $.closePopupLayer();
 }
 });
})(jQuery);

利用BlockUI支援很多常見的彈出層,表單、圖片、div視窗等。那麼這個外掛程式該如何使用呢?接著往下看。

先匯入jQuery的庫檔案(小提示:使用Google伺服器的壓縮版jQuery庫檔案載入速度會更快),然後再匯入BlockUI的庫檔案,如果你覺得庫檔案比較大你可以使用壓縮技術對其進行壓縮

 代碼如下 複製代碼

<SCRIPT type=text/javascript src="http://www.google-analytics.com/ga.js" async="true"></SCRIPT><SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="images/jquery.blockUI.js"></SCRIPT>

匯入庫檔案後,就可以調用BlockUI了,BlockUI的調用挺簡單的,看下面這段代碼

 

 代碼如下 複製代碼
$(function(){
$('#box_btn').click(function(){ //給box_btn綁定一個滑鼠點擊的事件
 $.blockUI({ //當點擊事件發生時調用彈出層
 message: $('#box'), //要彈出的元素box
 css: { //彈出元素的CSS屬性
 top: '50%',
   left: '50%',
   textAlign: 'left',
   marginLeft: '-320px',
   marginTop: '-145px',
 width: '600px',
 background: 'none'
 }
 }); <A href="http://www.111cn.net/">casino spiele online</A>
 $('.blockOverlay').attr('title','單擊關閉').click($.unblockUI); //遮罩層屬性的設定以及當按一下滑鼠遮罩層可以關閉彈出層
 $('.close').click($.unblockUI); //也可以自訂一個關閉按鈕來關閉彈出層
});
});

看了上面的代碼,其實你會發覺BlockUI的使用很簡單,有2個重要的方法分別是調用彈出層($.blockUI)和關閉彈出層($.unblockUI)。

$.blockUI定義了一個message屬性的,該屬性的值就定義了要彈出的元素,比如要彈出一個id為box的div元素,就可以這樣寫:message: $('#box'),對應了上面的第4行代碼。需要注意的是,要彈出的那個元素在彈出之前要將其在頁面中隱藏即設定該元素的CSS樣式為display:none。

$.blockUI還定義了一個css屬性,該屬性可以對彈出層的樣式進行再定義。細心的同志可能會開啟BlockUI的庫檔案查看,其實在庫檔案中也預設定義了一個彈出層的樣式,如果你在頁面中定義的樣式效果並不是很理想,最好是看看庫檔案中的$.blockUI.defaults的CSS屬性。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.