popup模拟confirm,alert,Prompt

本文介绍了一个基于HTML和JavaScript实现的自定义弹窗组件,包括提示、确认及输入框等多种类型。该组件通过CSS美化了界面,并利用JS实现了拖拽及遮罩效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/* Main.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> new document </title>
  <link href="style.css" _fcksavedurl=""style.css"" rel="stylesheet" type="text/css" />
  <script src="Mask.js" type="text/javascript"></script>
 </head>
 <body><br /><center>
  <input type="button" value="Prompt" onclick="ShowPop('Prompt')" />
  <input type="button" value="AlertError" onclick="ShowPop('AlertError')" />
  <input type="button" value="AlertSuccess" onclick="ShowPop('AlertSuccess')" />
  <input type="button" value="Confirm" onclick="ShowPop('Confirm')" />
  </center>
  <div id="popupContainer"></div>
  <script type="text/javascript">
<!--
   mask = new Mask();  
 
   popups = new Popups("popupContainer");

   function ShowPop(showType)
   {
  popups.createPopup(showType,showType,CallBack).show();
  
  return false;
   }

   function CallBack()
   {
  return true;
   }
  

//-->
</script>
 </body>
</html>

/* style.css */

body {
 background: #FFFFFF;
 color: #333333;
 font-size: 12px;
 margin: 0px;
 padding: 0px;
}

input {
 font-size: 12px;
}

/* 提醒信息” */
/* ---------- begin ---------- */
.title {
 height: 30px;
 margin: 0px auto;
 width: 950px;
}

.title .item, .title .itemA, .title .itemH {
 background: url(images/image.jpg) no-repeat;
 color: #000099;
 cursor: pointer;
 float: left;
 font-size: 14px;
 height: 29px;
 width: 102px;
 text-align: center;
 line-height: 28px;
 border: 1px solid #A4CEEC;
 border-bottom: none;
}

.title .item {
 background-position: 0px -1px;
}

.title .itemH {
 background-position: 0px -30px;
}

.title .itemA {
 background-position: 0px -59px;
 border-color: #73C5FF;
 color: #333333;
 cursor: auto;
 font-weight: bold;
 height: 29px;
}

.title .space {
 border-bottom: 1px solid #73C5FF;
 float: left;
 height: 29px;
 width: 1px;
}
/* ---------- end ---------- */


.loading, .empty {
 width: 100%;
}
.loading .label {
 background: url(http://www.sinaimg.cn/cj/money/images/progress2.gif) no-repeat 15px 5px;
 height: 20px;
 margin: 20px auto;
 line-height: 20px;
 padding: 5px;
 padding-left: 37px;
 width: 100px;
}

/* Popup */
/* ---------- begin ---------- */
.popup {
 position: absolute;
 width: 489px;
}

.popup .shadow {
 background: #999999;
 width: 486px;
 height: 192px;
 position: absolute;
 left: 3px;
 top: 3px;
 
 filter: alpha(opacity=60);
 -moz-opacity: 0.6;
 opacity: 0.6;
}

.popup .main {
 border: 1px solid #74C4FF;
 height: 190px;
 position: absolute;
 width: 484px;
}

.popup .main .head {
 background: #FFFFFF url(images/image.jpg) repeat-x 0px -197px;
 border-bottom: 1px solid #74C4FF;
 height: 25px;
 width: 484px;
}

.popup .main .head .titleAlert, .popup .main .head .titleConfirm, .popup .main .head .titlePrompt {
 background: url(images/image.jpg) no-repeat;
 float: left;
 height: 25px;
 width: 100px;
}
.popup .main .head .titleAlert {
 background-position: 0px -371px;
}
.popup .main .head .titleConfirm {
 background-position: 0px -396px;
}
.popup .main .head .titlePrompt {
 background-position: 0px -421px;
}

.popup .main .head .tail, .popup .main .head .tailH {
 background: url(images/image.jpg) no-repeat;
 float: right;
 height: 25px;
 width: 41px;
}

.popup .main .head .tail {
 background-position: -60px -284px;
}
.popup .main .head .tailH {
 background-position: -101px -284px;
}

.popup .main .head .tail .closeIcon, .popup .main .head .tailH .closeIcon {
 background: url(images/image.jpg) no-repeat;
 display: inline;
 float: right;
 font-size: 0px;
 height: 18px;
 margin: 3px 4px 0px 0px;
 width: 19px;
 cursor: pointer;
}
.popup .main .head .tail .closeIcon {
 background-position: -142px -284px;
}
.popup .main .head .tailH .closeIcon {
 background-position: -161px -284px;
}

.popup .main .body {
 background: #FFFFFF;
 height: 164px;
 width: 484px;
}

.popup .main .body .iconError, .popup .main .body .iconWarning, .popup .main .body .iconEditing, .popup .main .body .iconSuccess {
 background: url(images/image.jpg) no-repeat;
 display: inline;
 float: left;
 height: 62px;
 width: 60px;
 margin: 30px 40px;
}
.popup .main .body .iconError {
 background-position: -0px -222px;
}
.popup .main .body .iconWarning {
 background-position: -60px -222px;
}
.popup .main .body .iconEditing {
 background-position: -120px -222px;
}
.popup .main .body .iconSuccess {
 background-position: 0px -284px;
}

.popup .main .body .element {
 clear: right;
 display: inline;
 float: left;
 height: 100px;
 margin: 10px 0px;
 width: 305px;
}
.popup .main .body .element .elementEntity {
 height: 100px;
 vertical-align: middle;
}

.popup .main .body .element .elementEntity .title {
 font-size: 14px;
 width: 100%;
}
.popup .main .body .element .elementEntity label {
 font-weight: bold;
}
.popup .main .body .element .elementEntity span {
 color: #FF0000;
}

.popup .main .body .element .elementEntity .input {
 margin: 5px 0px;
 border: 1px solid #A5ACB2;
 font-size: 12px;
 height: 14px;
 padding: 2px;
 width: 200px;
}

.popup .main .body .buttons {
 text-align: center;
 clear: both;
}

.popup .main .body .buttons .button {
 display: inline;
 height: 25px;
 margin: 5px 10px;
 width: 80px;
}


/* ---------- end ---------- */

/* 其他 */
/* ---------- begin ---------- */
.mask { 
 filter: alpha(opacity=70);
 opacity: 0.7;
 background: #FFFFFF;
 position: absolute;
 left: 0px;
 top: 0px;
 
}
.loading {
 background: url(images/progress2.gif) no-repeat center center;
 position: absolute;
 left: 0px;
 top: 0px;
 
}

/* Mask.js */


function getElement(id) {
 return document.getElementById(id);
}

function createElement(type) {
 return document.createElement(type);
}

function removeElement(element) {
 try {
  if (element) {
   element.parentNode.removeChild(element);
  }
 }
 catch (e) {
 }
}

function hideElement(element) {
 if (element) {
  element.style.display = "none";
 }
}

function hideElementV(element) {
 if (element) {
  element.style.visibility = "hidden";
  element.style.display = "";
 }
}

function showElement(element) {
 if (element) {
  element.style.display = "";
  element.style.visibility = "";
 }
}

function clearElement(element) {
 for (var i in element) {
  try {
   
   element[i] = null;
  }
  catch (e) {
   continue;
  }
 }
}

function convertHTML(value)
{
 if (!value)
 {
  return "";
 }
 return value.toString().split("&lt;").join("<").split("&gt;").join(">").split("&nbsp;").join(" ").split("&").join("&amp;").split("<").join("&lt;").split(">").join("&gt;").split(" ").join("&nbsp;");
}

function GetOffsetPos(element)
{
 var flag = element.tagName.toUpperCase() == "INPUT" ? true : false;
 var posTop = 0, posLeft = 0;
 do {
  posTop += element.offsetTop || 0;
  posLeft += element.offsetLeft || 0;
  element = element.offsetParent;
 } while (element);
 if (navigator.appVersion.indexOf("MSIE 6.0") != -1 && flag) {
  posLeft++;
 }
 return [posLeft, posTop];
}

function getWindowSize() {
 var myWidth = 0, myHeight = 0;
 if( typeof( window.innerWidth ) == 'number' ) {
  //Non-IE
  myWidth = window.innerWidth;
  myHeight = window.innerHeight;
 } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
  //IE 6+ in 'standards compliant mode'
  myWidth = document.documentElement.clientWidth;
  myHeight = document.documentElement.clientHeight;
 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
  //IE 4 compatible
  myWidth = document.body.clientWidth;
  myHeight = document.body.clientHeight;
 }
 return([myWidth,myHeight]);
}  

function hideSelects(zIndexNow) {
 if (navigator.appVersion.indexOf("MSIE 6.0") != -1) {
  var selects = document.getElementsByTagName("select");
  var length = selects.length;
  for (var i = 0; i < length; i++) {
   if (selects[i].zIndexNow != zIndexNow && selects[i].style.visibility != "hidden") {
    selects[i].style.visibility = "hidden";
    selects[i].zIndexNow = zIndexNow;
   }
  }
 }
}

function showSelects(zIndexNow) {
 if (navigator.appVersion.indexOf("MSIE 6.0") != -1) {
  var selects = document.getElementsByTagName("select");
  var length = selects.length;
  for (var i = 0; i < length; i++) {
   if (selects[i].zIndexNow == zIndexNow) {
    selects[i].style.visibility = "";
    selects[i].zIndexNow = -1;
   }
  }
 }
}

var Mask = function () {
 this.zIndexNow = 100;
 this.maskDiv = null;
 this.indexArr = [];
 this.show = function () {
  this.zIndexNow += 10;
  if (this.indexArr.length == 0){
   var maskHeight = document.documentElement.scrollHeight > getWindowSize()[1] ? document.documentElement.scrollHeight : getWindowSize()[1];
   this.maskDiv = createElement("div");
   this.maskDiv.onclick = function () {
    var event = arguments[0] || window.event;
    event.cancelBubble = true;
   };
   this.maskDiv.className = "mask";
   this.maskDiv.style.width = "100%";   
   this.maskDiv.style.height = maskHeight + "px";
   document.body.appendChild(this.maskDiv);
  }
  this.maskDiv.style.zIndex = this.zIndexNow - 1;
  this.indexArr.push(this.zIndexNow - 1);
  hideSelects(this.zIndexNow);
 };
 this.clean = function () {
  showSelects(this.zIndexNow);
  this.indexArr.pop();
  if (this.indexArr.length > 0){
   this.maskDiv.style.zIndex = this.indexArr[this.indexArr.length - 1];
   this.zIndexNow = this.indexArr[this.indexArr.length - 1] + 1;
  }
  else {
   document.body.removeChild(this.maskDiv);
   this.zIndexNow = 100;
  }
 };
};

var DragAble = function (dragable,handler) {
 this.iDiffX = 0;
 this.iDiffY = 0;
 this.oDragable = dragable;
 this.oHandler = handler;
 
 this.mouseDown = function(){
  document.body.onselectstart = function () {return false;};
  document.body.style.userSelect = "none";
  document.body.style.MozUserSelect = "none";
  var object = arguments.callee.object;
  var event = arguments[0] || window.event;
  object.iDiffX = event.clientX - object.oDragable.offsetLeft;
  object.iDiffY = event.clientY - object.oDragable.offsetTop;
  document.body.onmousemove = object.mouseMove;
  document.body.onmouseup = object.mouseUp;
  object.oHandler.style.cursor = "move";
 };
 this.mouseDown.object = this;
 
 this.oHandler.onmousedown = this.mouseDown;
 
 this.mouseMove = function() {
  var object = arguments.callee.object;
  var event = arguments[0] || window.event;
  var wWidth = getWindowSize()[0];
  if ((event.clientX - object.iDiffX) >= 0 && (event.clientX - object.iDiffX + object.oDragable.clientWidth) <= wWidth - 20){
   object.oDragable.style.left = event.clientX - object.iDiffX + "px";
  }
  else {
   if ((event.clientX - object.iDiffX) < 0){
    object.oDragable.style.left = 0 + "px";
   }
   else {
    object.oDragable.style.left = wWidth - object.oDragable.clientWidth - 20 + "px";
   }
  }
  if ((event.clientY - object.iDiffY) >= 0){
   object.oDragable.style.top = event.clientY - object.iDiffY + "px";
  }
  else {
   object.oDragable.style.top = 0 + "px";
  }
  
 };
 this.mouseMove.object = this;
 
 this.mouseUp = function() {
  var object = arguments.callee.object;
  document.body.onselectstart = "";
  document.body.style.userSelect = "";
  document.body.style.MozUserSelect = "";
  document.body.onmousemove = "";
  document.body.onmouseup = "";
  object.oHandler.style.cursor = "";
 };
 this.mouseUp.object = this;
};

var Popups = function (stringContainerId) {
 this.containerElement = getElement(stringContainerId);
 this.containerElement.onclick = function (){
  var event = arguments[0] || window.event;
  event.cancelBubble = true;
 };
 this.bindElement = function (stringTagName, stringClassName, objectContainerElement, objectContainer) {
  var element = createElement(stringTagName);
  element.className = stringClassName;
  if (objectContainerElement) {
   objectContainerElement.appendChild(element);
  }
  if (objectContainer){
   element.container = objectContainer;
  }
  return element;
 };
 this.initializeElement = function (stringTitleIconClassName, stringIconClassName, booleanButtons, functionCallback) {
  var container = this.bindElement("div", "popup");
  container.bindElement = this.bindElement;
  var shadow = this.bindElement("div", "shadow", container, container);
  var main = this.bindElement("div", "main", container, container);
  var head = this.bindElement("div", "head", main, container);
  container.head = head;
  var titleIcon = this.bindElement("div", stringTitleIconClassName, head, container);
  container.titleIcon = titleIcon;
  var tail = this.bindElement("div", "tail", head, container);
  var closeIcon = this.bindElement("div", "closeIcon", tail, container);
  closeIcon.backgroundElement = tail;
  closeIcon.onmouseover = function () {
   this.backgroundElement.className = "tailH";
  };
  closeIcon.onmouseout = function () {
   this.backgroundElement.className = "tail";
  };
  closeIcon.onclick = function () {
   this.container.remove();
  };
  var body = this.bindElement("div", "body", main, container);
  container.body=body;
  var icon = this.bindElement("div", stringIconClassName, body, container);
  container.icon = icon;
  var element = this.bindElement("div", "element", body, container);
  var elementTable = createElement("table");
  elementTableTrTd = elementTable.insertRow(0).insertCell(0);
  elementTableTrTd.className = "elementEntity";
  element.appendChild(elementTable);
  container.element = elementTableTrTd;
  var buttons = this.bindElement("div", "buttons", body, container);
  container.buttons = buttons;
  var buttonOk = this.bindElement("input", "button");
  buttonOk.type = "button";
  buttonOk.value = "是";
  buttonOk.container = container;
  buttonOk.onclick = function () {
   if (this.container.input) {
    if (this.container.input.value == "") {
     popups.createPopup("AlertError", "Hello").show();
     this.container.input.focus;
    }
    else {
     functionCallback(this.container.input.value);
     this.container.remove();
    }
   }
   else {
    functionCallback(this.container);
    this.container.remove();
   }
  };
  container.buttonOk = buttonOk;
  buttons.appendChild(buttonOk);
  if (booleanButtons) {
   var buttonCancel = this.bindElement("input", "button");
   buttonCancel.type = "button";
   buttonCancel.value = "取消";
   buttonCancel.container = container;
   buttonCancel.onclick = function () {
    this.container.remove();
   };
   container.buttonCancel = buttonCancel;
   buttons.appendChild(buttonCancel);
  }
  this.containerElement.appendChild(container);
  hideElement(container);
  container.show = function () {
   this.style.left = (getWindowSize()[0] - 489) / 2 + document.documentElement.scrollLeft + "px";
   this.style.top = (getWindowSize()[1] - 192) / 2 + document.documentElement.scrollTop + "px";
   mask.show();
   this.style.zIndex = mask.zIndexNow;
   showElement(this);
   var dragAble = new DragAble(this, this.head);
   if (this.input) {
    var setTimeoutFocus = function () {
     arguments.callee.input.select();
    };
    setTimeoutFocus.input = this.input;
    setTimeout(setTimeoutFocus, 1);
   }
   else {
    this.buttonOk.focus();
   }
  };
  container.remove = function () {
   mask.clean();
   removeElement(this);
  };
  container.hide = function () {
   hideElement(this);
  };
  return container;
 };
 this.createPopup = function (stringType, stringNote, functionCallback) {
  switch (stringType) {
   case "AlertError":
    var popup = this.initializeElement("titleAlert", "iconWarning", false, new Function());
    popup.element.innerHTML = '<div class="title">' + stringNote + '</div>';
    return popup;
    break;
   case "AlertSuccess":
    var popup = this.initializeElement("titleAlert", "iconSuccess", false, new Function());
    popup.element.innerHTML = '<div class="title">' + stringNote + '</div>';
    return popup;
    break;
   case "Confirm":
    var popup = this.initializeElement("titleConfirm", "iconEditing", true, functionCallback);
    var line = createElement("div");
    line.innerHTML = '<div class="title">' + stringNote + '<br /><div>';
    popup.element.appendChild(line);
    return popup;
    break;
   case "Prompt":
    var combination = stringNote;
    functionCallback.combination = combination;
    var popup = this.initializeElement("titlePrompt", "iconEditing", true, functionCallback);
    var line = createElement("div");
    var arrayNote = stringNote;
    line.innerHTML = '<div class="title">hao<label>' + convertHTML(combination) + '</label>:<div>';
    var input = createElement("input");
    input.type = "text";
    input.className = "input";
    popup.input = input;
    input.container = popup;
    input.onkeydown = function () {
     var event = arguments[0] || window.event;
     switch (event.keyCode) {
      case 13: //Enter
       this.container.buttonOk.click();
       break;
      case 27: //Escape
       this.container.remove();
       break;
      default:
       break;
     }
    };
    line.appendChild(input);
    popup.element.appendChild(line);
    return popup;
    break;
  }
 };
};

 /* images/image.jpg */

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值