popup模拟confirm,alert,Prompt-优快云博客

本文链接：https://blog.youkuaiyun.com/wangyang7/article/details/1917223

本文介绍了一个基于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("<").join("<").split(">").join(">").split(" ").join(" ").split("&").join("&").split("<").join("<").split(">").join(">").split(" ").join(" ");
}

/* images/image.jpg */