首頁 > 開發者 > 手機程式開發

js 彈出div視窗 可移動 可關閉

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：賦值   use   sgd   filter   event   onclick   對象   sem   document   

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>無標題文檔</title>
<script language="javascript">
function alertWin(str){
var msgw, msgh, bordercolor;
msgw = 300;//提示視窗的寬度
msgh = 100;//提示視窗的高度
titleheight = 25 //提示視窗標題高度
bordercolor = "#A480B2";//提示視窗的邊框顏色
titlecolor = "#A480B2";//提示視窗的標題顏色

//根據自己需求注意寬度和高度的調整
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;
//遮罩層
var bgObj = document.createElement("div");
bgObj.setAttribute("id", "bgObj");//設定ID
bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
document.body.appendChild(bgObj);

//快顯視窗
var msgObj=document.createElement("div");
msgObj.setAttribute("id", "msgDiv");//可以用bgObj.id="msgDiv"的方法，是為div指定屬性值
msgObj.setAttribute("align", "center");//為div的align賦值
msgObj.style.background = "white";//背景顏色為白色
msgObj.style.border = "1px solid " + bordercolor;//邊框屬性，顏色在上面已經賦值
msgObj.style.position = "absolute";//絕對位置
msgObj.style.left = (iWidth-msgw)/2 ;//從左側開始位置
msgObj.style.top = (iHeight-msgh)/2;//從上部開始位置
msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";//字型屬性
msgObj.style.width = msgw + "px";//提示框的寬(上面定義過)
msgObj.style.height = msgh + "px";//提示框的高(上面定義過)
msgObj.style.textAlign = "center";//文本位置屬性，置中。
msgObj.style.lineHeight = "25px";//行間距
msgObj.style.zIndex = "102";//層的z軸位置
document.body.appendChild(msgObj);

//快顯視窗標題
var title = document.createElement("div");//建立一個標題對象
title.setAttribute("id", "msgTitle");//為標題對象填加id
title.style.margin = "0";//浮動
title.style.padding = "3px";//浮動
title.style.background = titlecolor;//背景顏色
title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity = "0.75";//透明
//title.style.border="1px solid " + bordercolor;//邊框
title.style.height = "25px";//高度
title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";//字型屬性
//title.style.color = "red";//文字顏色
title.style.cursor = "move";//滑鼠樣式
title.innerHTML="<table border=‘0‘ width=‘100%‘><tr><td align=‘left‘>2222</td><td align=\"right\"><a href=‘#‘ onclick=‘closeDiv()‘>x</a></td></tr></table>";

//設定視窗可移動

var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
title.onmousedown = function() {
var evt = getEvent();
moveable = true;
moveX = evt.clientX;
moveY = evt.clientY;
moveTop = parseInt(msgObj.style.top);
moveLeft = parseInt(msgObj.style.left);
document.onmousemove = function() {
if (moveable){
var evt = getEvent();
var x = moveLeft + evt.clientX - moveX;
var y = moveTop + evt.clientY - moveY;
if ( x > 0 &&( x + msgw < iWidth) && y > 0 && (y + msgh < iHeight) ){
msgObj.style.left = x + "px";
msgObj.style.top = y + "px";
}
}
};
document.onmouseup = function (){
if (moveable) {
document.onmousemove = docMouseMoveEvent;
document.onmouseup = docMouseUpEvent;
moveable = false;
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
};
}
//獲得事件Event對象，用於相容IE和FireFox
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}

msgObj.appendChild(title);//在提示框中增加標題
var txt = document.createElement("p");
txt.style.margin = "1em 0";//文本浮動
txt.setAttribute("id", "msgTxt");//為p屬性增加id屬性
txt.innerHTML = str;//把傳進來的值賦給p屬性
msgObj.appendChild(txt);//把p屬性增加到提示框裡
}

//添加關閉功能
function closeDiv() {
var msgTitelObject = document.getElementById("msgDiv");
document.body.removeChild(msgTitelObject);
var bgObj = document.getElementById("bgObj");
document.body.removeChild(bgObj);

}

</script>
</head>
<body>
<input type="button" value="xx" onclick="alertWin(‘訊息主題‘);" />
</body>
</html>

js 彈出div視窗 可移動 可關閉

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
node js sails js keystone js js encode js min js php js serialize js today
相關文章
（十）——WebApp
win10提示“無法設定行動熱點 請開啟WLAN”的解決方案
c#通過app.manifest使程式以管理員身份運行
解決Android 6.0擷取wifi Mac地址為02:00:00:00:00:00問題【轉】
Android TextView加底線的幾種方式
《Android應用效能最佳化》 第8章 圖形

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More