彈出視窗，載入頁面。彈出視窗初始位置為居中。可在關閉視窗時，回撥主頁面按鈕。要求jquery。

效果演示

首先，演示主視窗兩個按鈕作用。然後，演示關閉彈出視窗時，呼叫主視窗的兩個按鈕。

主要程式碼（時間倉促，沒加註釋，不過程式碼很簡單，就是建立幾個元素拼在一起，每個元素都用var=標明瞭）

var _divMask;
var _divBox;

function ShowMask() {
  var divMask = $('<div></div>')
    .attr("id","divMask")
    .css({
      "position": "absolute","left": "0","top": "0","width": "100%","height": "100%","backgroundColor": "gray","opacity": "0.4"
    }).appendTo("body");
  _divMask = divMask;
  return divMask;
}

function ShowBox(title,url,width,height) {
  ShowMask();
  var divBox = $("<div></div>")
    .attr("id","divBox")
    .css({
      "position": "absolute","top": (($(document).height() - height) / 2) < 0 ? 0 : (($(document).height() - height) / 2),"left": (($(document).width() - width) / 2),"width": width,"height": height,"border": "2px solid gray","backgroundColor": "white"
    })
    .appendTo("body");
  var pTitle = $("<p></p>")
    .css({
      "width": (width - 20) / 2,"float": "left","padding": "5px","margin": "0"
    })
    .text(title)
    .appendTo(divBox);
  var pClose = $("<p></p>")
    .css({
      "width": (width - 20) / 2,"text-align": "right","margin": "0"
    })
    .appendTo(divBox);
  var aClose = $("<a></a>")
    .css({
      "color": "black","text-decoration": "none"
    })
    .attr("href","javascript:CloseBox();")
    .text("關 閉")
    .appendTo(pClose);
  var hr = $("<hr/>")
    .css({
      "margin": "0","border": "1px solid gray"
    })
    .appendTo(divBox);
  var iframeContainer = $("<iframe></iframe>")
    .attr("id","divContainer")
    .css({
      "width": width,"height": height - 13 - pTitle.height(),"overflow": "auto","border": "0"
    })
    .attr("src",url)
  .appendTo(divBox);
  _divBox = divBox;
  //divBox.draggable({ handle: "p" });
}

function CloseBox(btn) {
  if (_divMask == null) {
    if (btn != null && btn != '') {
      parent.document.getElementById(btn).click();
    }
    $(parent.document.getElementById("divMask")).remove();
    $(parent.document.getElementById("divBox")).remove();
  }
  else {
    _divMask.remove();
    _divBox.remove();
  }
}

下載

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。