1. 程式人生 > >可自動關閉的JS訊息提示框

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

Js程式碼  收藏程式碼
  1. //自動關閉提示框  
  2. function Alert(str) {  
  3.     var msgw,msgh,bordercolor;  
  4.     msgw=350;//提示視窗的寬度  
  5.     msgh=80;//提示視窗的高度  
  6.     titleheight=25 //提示視窗標題高度  
  7.     bordercolor="#336699";//提示視窗的邊框顏色  
  8.     titlecolor="#99CCFF";//提示視窗的標題顏色  
  9.     var sWidth,sHeight;  
  10.     //獲取當前視窗尺寸  
  11.     sWidth = document.body.offsetWidth;  
  12.     sHeight = document.body.offsetHeight;  
  13. //    //背景div  
  14.     var bgObj=document.createElement("div");  
  15.     bgObj.setAttribute('id','alertbgDiv');  
  16.     bgObj.style.position="absolute";  
  17.     bgObj.style.top="0";  
  18.     bgObj.style.background="#E8E8E8";  
  19.     bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"
    ;  
  20.     bgObj.style.opacity="0.6";  
  21.     bgObj.style.left="0";  
  22.     bgObj.style.width = sWidth + "px";  
  23.     bgObj.style.height = sHeight + "px";  
  24.     bgObj.style.zIndex = "10000";  
  25.     document.body.appendChild(bgObj);  
  26.     //建立提示視窗的div  
  27.     var msgObj = document.createElement("div")  
  28.     msgObj.setAttribute("id"
    ,"alertmsgDiv");  
  29.     msgObj.setAttribute("align","center");  
  30.     msgObj.style.background="white";  
  31.     msgObj.style.border="1px solid " + bordercolor;  
  32.     msgObj.style.position = "absolute";  
  33.     msgObj.style.left = "50%";  
  34.     msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";  
  35.     //視窗距離左側和頂端的距離   
  36.     msgObj.style.marginLeft = "-225px";  
  37.     //視窗被捲去的高+(螢幕可用工作區高/2)-150  
  38.     msgObj.style.top = document.body.scrollTop+(window.screen.availHeight/2)-150 +"px";  
  39.     msgObj.style.width = msgw + "px";  
  40.     msgObj.style.height = msgh + "px";  
  41.     msgObj.style.textAlign = "center";  
  42.     msgObj.style.lineHeight ="25px";  
  43.     msgObj.style.zIndex = "10001";  
  44.     document.body.appendChild(msgObj);  
  45.     //提示資訊標題  
  46.     var title=document.createElement("h4");  
  47.     title.setAttribute("id","alertmsgTitle");  
  48.     title.setAttribute("align","left");  
  49.     title.style.margin="0";  
  50.     title.style.padding="3px";  
  51.     title.style.background = bordercolor;  
  52.     title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";  
  53.     title.style.opacity="0.75";  
  54.     title.style.border="1px solid " + bordercolor;  
  55.     title.style.height="18px";  
  56.     title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";  
  57.     title.style.color="white";  
  58.     title.innerHTML="提示資訊";  
  59.     document.getElementById("alertmsgDiv").appendChild(title);  
  60.     //提示資訊  
  61.     var txt = document.createElement("p");  
  62.     txt.setAttribute("id","msgTxt");  
  63.     txt.style.margin="16px 0";  
  64.     txt.innerHTML = str;  
  65.     document.getElementById("alertmsgDiv").appendChild(txt);  
  66.     //設定關閉時間  
  67.     window.setTimeout("closewin()",2000);   
  68. }  
  69. function closewin() {  
  70.     document.body.removeChild(document.getElementById("alertbgDiv"));  
  71.     document.getElementById("alertmsgDiv").removeChild(document.getElementById("alertmsgTitle"));  
  72.     document.body.removeChild(document.getElementById("alertmsgDiv"));  
  73. }  

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

   <script type="text/javascript">

Html程式碼  收藏程式碼
  1.      function form_check(){  
  2.      if(document.form1.user.value==""){Alert("請輸入使用者名稱!");document.form1.user.focus();return (false);}  
  3.      if(document.form1.password.value==""){Alert("請輸入密碼!");document.form1.password.focus();return (false);}  
  4.      }  
  5. </script>  
  6. <form name="form1" onsubmit="return form_check();" method="post" action="login.asp">   
  7. 使用者名稱: <input name="user" type="text" id="user"/>  
  8. 密碼: <input name="password" type="password" id="password" />  
  9. <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