溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了javascript+html5+css3自定義提示窗口的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
javascript自定義提示窗口效果圖：
源碼：
1.demo.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>自定義提示窗口</title>
<script type="text/javascript" src="js/myAlert.js"></script>
<script type="text/javascript">
function bodyOnload() {
var myInput = document.getElementById("myInput");
myInput.style.border = "none";
myInput.style.backgroundColor = "rgba(223, 230, 223, 0.3)";
myInput.value = "請輸入你的名字：";
myInput.onfocus = function () {
myInput.style.outline = "none";
myInput.value = "";
};
var image_div = document.createElement("div");
image_div.style.width = myInput.offsetHeight ;
image_div.style.height = myInput.offsetHeight;
image_div.style.float = "right";
image_div.style.cursor = "pointer";
image_div.onclick = function () {
new MyAlert().alert("系統(tǒng)提示","click the image_div",5000);
};
var outer_div = document.createElement("div");
outer_div.style.border = "1px solid red";
outer_div.style.width = parseInt(myInput.offsetWidth) + parseInt(image_div.style.width);
outer_div.style.height = myInput.offsetHeight;
document.body.appendChild(outer_div);
outer_div.appendChild(myInput);
outer_div.appendChild(image_div);
}
</script>
</head>
<body onload="bodyOnload()">
<input id="myInput" type="text" name="name" title="名字"/>
</body>
</html>2.myAlert.js
/**
* Created by zhuwenqi on 2017/6/20.
*/
/**
* @param options 基本配置
* @constructor
*/
function MyAlert(options) {
this.options = options ;
}
/**
* 提示窗口
* @param title 提示標(biāo)題，默認為""
* @param content 提示內(nèi)容,默認為""
* @param closeTime 提示窗口自動關(guān)閉時間，單位為ms，默認為2000ms
*/
MyAlert.prototype.alert = function (title,content,closeTime) {
var div_background = document.createElement("div");
div_background.style.position = "absolute";
div_background.style.left = "0";
div_background.style.top = "0";
div_background.style.width = "100%";
div_background.style.height = "100%";
div_background.style.backgroundColor = "rgba(0,0,0,0.1)";
div_background.style.zIndex = "1001";
var div_alert = document.createElement("div");
div_alert.style.position = "absolute";
div_alert.style.left = "40%";
div_alert.style.top = "0";
div_alert.style.width = "20%";
div_alert.style.height = "20%";
div_alert.style.overflow = "auto";
div_alert.style.backgroundColor = "rgba(255,255,255,0.5)";
div_alert.style.zIndex = "1002";
div_alert.style.border = "1px solid blue";
div_alert.style.borderRadius = "10px";
div_alert.style.boxShadow = "0 0 10px gray";
var div_title = document.createElement("div");
div_title.style.backgroundColor = "rgba(0,255,0,0.3)";
div_title.style.textAlign = "center";
var span_title = document.createElement("span");
span_title.style.fontSize = "20px";
span_title.style.fontWeight = "bold";
var text_title = document.createTextNode((title === undefined || title === null) ? "" : title) ;
span_title.appendChild(text_title);
div_title.appendChild(span_title);
div_alert.appendChild(div_title);
var div_content = document.createElement("div");
div_content.style.lineHeight = "35px";
div_content.style.paddingLeft = "10px";
var span_content = document.createElement("span");
var text_content = document.createTextNode((content === undefined || content === null) ? "" : content);
span_content.appendChild(text_content);
div_content.appendChild(span_content);
div_alert.appendChild(div_content);
document.body.appendChild(div_background);
document.body.appendChild(div_alert);
setTimeout(function () {
document.body.removeChild(div_alert);
document.body.removeChild(div_background);
},(closeTime === undefined || closeTime === null || closeTime === "") ? 2000 : closeTime);
};感謝你能夠認真閱讀完這篇文章，希望小編分享的“javascript+html5+css3自定義提示窗口的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼