可自動關閉的JS訊息提示框

阿新 • • 發佈：2019-01-17

Js程式碼

//自動關閉提示框
function Alert(str) {
var msgw,msgh,bordercolor;
msgw=350;//提示視窗的寬度
msgh=80;//提示視窗的高度
titleheight=25 //提示視窗標題高度
bordercolor="#336699";//提示視窗的邊框顏色
titlecolor="#99CCFF";//提示視窗的標題顏色
var sWidth,sHeight;
//獲取當前視窗尺寸
sWidth = document.body.offsetWidth;
sHeight = document.body.offsetHeight;
// //背景div
var bgObj=document.createElement("div");
bgObj.setAttribute('id','alertbgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#E8E8E8";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"

;
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width = sWidth + "px";
bgObj.style.height = sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
//建立提示視窗的div
var msgObj = document.createElement("div")
msgObj.setAttribute("id"

,"alertmsgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
//視窗距離左側和頂端的距離
msgObj.style.marginLeft = "-225px";
//視窗被捲去的高+（螢幕可用工作區高/2）-150
msgObj.style.top = document.body.scrollTop+(window.screen.availHeight/2)-150 +"px";
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";
document.body.appendChild(msgObj);
//提示資訊標題
var title=document.createElement("h4");
title.setAttribute("id","alertmsgTitle");
title.setAttribute("align","left");
title.style.margin="0";
title.style.padding="3px";
title.style.background = bordercolor;
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="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.innerHTML="提示資訊";
document.getElementById("alertmsgDiv").appendChild(title);
//提示資訊
var txt = document.createElement("p");
txt.setAttribute("id","msgTxt");
txt.style.margin="16px 0";
txt.innerHTML = str;
document.getElementById("alertmsgDiv").appendChild(txt);
//設定關閉時間
window.setTimeout("closewin()",2000);
}
function closewin() {
document.body.removeChild(document.getElementById("alertbgDiv"));
document.getElementById("alertmsgDiv").removeChild(document.getElementById("alertmsgTitle"));
document.body.removeChild(document.getElementById("alertmsgDiv"));
}

使用方法直接呼叫Alert('提示資訊')即可，如下：

Html程式碼

function form_check(){
if(document.form1.user.value==""){Alert("請輸入使用者名稱！");document.form1.user.focus();return (false);}
if(document.form1.password.value==""){Alert("請輸入密碼！");document.form1.password.focus();return (false);}
}
</script>
<form name="form1" onsubmit="return form_check();" method="post" action="login.asp">
使用者名稱： <input name="user" type="text" id="user"/>
密碼： <input name="password" type="password" id="password" />
<INPUT id=btnEnter type=image src="images/login.gif" name=btnEnter>

下面是完整的例子

<html>
<head>
<title>JavaScript自動關閉視窗</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
</head>
<body>   
<input type="button" value="彈出alert框自動關閉" onClick="Alert('不點選確定三秒後自動關閉')">  
<script>
//自動關閉提示框  
function Alert(str) {  
    var msgw,msgh,bordercolor;  
    msgw=350;//提示視窗的寬度  
    msgh=80;//提示視窗的高度  
    titleheight=25 //提示視窗標題高度  
    bordercolor="#336699";//提示視窗的邊框顏色  
    titlecolor="#99CCFF";//提示視窗的標題顏色  
    var sWidth,sHeight;  
    //獲取當前視窗尺寸  
    sWidth = document.body.offsetWidth;  
    sHeight = document.body.offsetHeight;  
//    //背景div  
    var bgObj=document.createElement("div");  
    bgObj.setAttribute('id','alertbgDiv');  
    bgObj.style.position="absolute";  
    bgObj.style.top="0";  
    bgObj.style.background="#E8E8E8";  
    bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";  
    bgObj.style.opacity="0.6";  
    bgObj.style.left="0";  
    bgObj.style.width = sWidth + "px";  
    bgObj.style.height = sHeight + "px";  
    bgObj.style.zIndex = "10000";  
    document.body.appendChild(bgObj);  
    //建立提示視窗的div  
    var msgObj = document.createElement("div")  
    msgObj.setAttribute("id","alertmsgDiv");  
    msgObj.setAttribute("align","center");  
    msgObj.style.background="white";  
    msgObj.style.border="1px solid " + bordercolor;  
    msgObj.style.position = "absolute";  
    msgObj.style.left = "50%";  
    msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";  
    //視窗距離左側和頂端的距離   
    msgObj.style.marginLeft = "-225px";  
    //視窗被捲去的高+（螢幕可用工作區高/2）-150  
    msgObj.style.top = document.body.scrollTop+(window.screen.availHeight/2)-150 +"px";  
    msgObj.style.width = msgw + "px";  
    msgObj.style.height = msgh + "px";  
    msgObj.style.textAlign = "center";  
    msgObj.style.lineHeight ="25px";  
    msgObj.style.zIndex = "10001";  
    document.body.appendChild(msgObj);  
    //提示資訊標題  
    var title=document.createElement("h4");  
    title.setAttribute("id","alertmsgTitle");  
    title.setAttribute("align","left");  
    title.style.margin="0";  
    title.style.padding="3px";  
    title.style.background = bordercolor;  
    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="18px";  
    title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";  
    title.style.color="white";  
    title.innerHTML="提示資訊";  
    document.getElementById("alertmsgDiv").appendChild(title);  
    //提示資訊  
    var txt = document.createElement("p");  
    txt.setAttribute("id","msgTxt");  
    txt.style.margin="16px 0";  
    txt.innerHTML = str;  
    document.getElementById("alertmsgDiv").appendChild(txt);  
    //設定關閉時間  
    window.setTimeout("closewin()",2000);   
}  
function closewin() {  
    document.body.removeChild(document.getElementById("alertbgDiv"));  
    document.getElementById("alertmsgDiv").removeChild(document.getElementById("alertmsgTitle"));  
    document.body.removeChild(document.getElementById("alertmsgDiv"));  
}
</script>
</body>   
</html>

可自動關閉的JS訊息提示框

Js程式碼 //自動關閉提示框 function Alert(str) { var msgw,msgh,bordercolor; msgw=350;//提示視窗的寬度 msgh=80;//提示視窗的高度 ti

win32界面程序開發，自制一個會自動銷毀的提示框

win 使用定時函數 dev github 時間參數程序開發思路：創建線程裏面啟動窗口，設置定時器關閉該窗口。創建窗口幾個步驟和一般窗口無異，註冊、然後createwindow，之後showwinodw，然後消息循環。在createwindow之後，獲取到窗口

自定義訊息提示框

使用原生JavaScript簡單封裝的一個訊息提示模態框，如果誰有更好的方式可以分享，謝謝！ <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta

ymPrompt.js訊息提示元件

轉載：https://www.cnblogs.com/linzheng/archive/2010/11/15/1878058.html 使用說明： 1、在頁面中引入ymPrompt.js。如：<scrip

微信小程式showToast訊息提示框

初心-楊瑞超個人部落格誠邀您加入qq群(IT-程式猿-技術交流群)：757345416 顯示訊息提示框示例程式碼： wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) 附：

可自動關閉的alert方法

https://www.cnblogs.com/liushiyong1/p/3549081.html 可自動關閉的alert()方法 layer.msg <html> <head>

微信小程式-訊息提示框

微信小程式開發中toast也是重要的訊息提示方式. 提示框： wx.showToast(OBJECT) 顯示訊息提示框 OBJECT引數說明：示例程式碼： ? 1 2 3 4 5 wx.showTo

MUI-dialog（對話方塊）,警告框、確認框、輸入對話方塊、訊息提示框

本文主要講述dialog（對話方塊），包括：警告框、確認框、輸入對話方塊、訊息提示框四類。元件名作用 alert 警告框 confirm 確認框

c#訊息提示框messagebox的簡單使用

訊息對話方塊是用messagebox物件的show方法顯示的。MessageBox物件是名稱空間System.Windows.Forms的一部分,Show是一個靜態方法,意思是說,不需要基於MessageBox類的物件建立例項,就可以使用該方法。而且該方法是可以過載的,即方

怎樣在jsp頁面顯示訊息提示框

怎樣在頁面顯示一個訊息提示框！相信你會用到的，複製貼上html直接使用！<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ page language="j

微信小程式-訊息提示框例項

做Android的時候對toast是很熟悉的.微信小程式開發中toast也是重要的訊息提示方式. 提示框： wx.showToast(OBJECT) 顯示訊息提示框 OBJECT引數說明：示例程式碼： wx.showToast({ title: '成功', icon

tipso外掛---訊息提示框

很多時候，我們會遇到這樣的情況：字串太長了，顯示超出了應該在的範圍，或者根本顯示不全。這個時候，我們往往都很鬱悶，既要顯示資訊，又要保證樣式好看，怎麼辦呢，一般都是：給這個div加個mouseOver事件，在事件中設定詳情提示框。但是，如果有很多很多這樣的情況呢？

精美舒適的對話訊息提示框--第三方開源--SweetAlertDialog

SweetAlertDialog（sweet-alert-dialog）是一個套製作精美、動畫效果出色生動的Android對話、訊息提示框 SweetAlertDialog（sweet-alert-dialog）在github上的專案主頁是：https://github

Toastr訊息提示框的使用

toastr是一個基於jQuery簡單、漂亮的訊息提示外掛，使用簡單、方便，可以根據設定的超時時間自動消失。 1、使用很簡單，首選引入toastr的js、css檔案 <script ty

微信小程式開發之吐司toast(訊息提示框)

做Android的時候對toast是很熟悉的.微信小程式開發中吐司也是重要的訊息提示方式. 上程式碼: 1.index.wxml toast是微信提供的元件,duration是延遲時間,單位毫秒.這裡

JAVA中的訊息提示框

JAVA 中提供如下訊息提示框：注意：如果報newFrame.getContentPane(),錯誤，則修改為null 即可 JOptionPane.showMessageDialog(newFrame.getContentPane(),

使用Toast顯示訊息提示框

1、佈局檔案 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="

微信小程式自定義訊息提示框

需求描述： wx.showToast(OBJECT)介面呼叫，但是不需要icon和image，即便image為空也有佔位，實際上只想輸出自定義文字內容。效果截圖：程式碼如下： <!

【Android開發】訊息提示框與對話方塊-使用Toast顯示訊息提示框

在前面的例項中，已經應用過Toast類來顯示一個簡單的提示框了。這次將對Toast進行詳細介紹。Toast類用於在螢幕中顯示一個訊息提示框，該訊息提示框沒有任何控制按鈕，並且不會獲得焦點，經過一段時間後自動消失。通常用於顯示一些快速提示資訊，應用範圍非常廣泛。使用Toas

彈出訊息提示框，彈出確認取消，彈出物品獲得提示框

一、彈出提示框 Globals.MUIManager.CreatMessageLabel("支付失敗"); public T GetUI<T>() where T : HotFix_Project.UI.UI_Logic

可自動關閉的JS訊息提示框

相關推薦