Hộp cảnh báo JavaScript với bộ hẹn giờ

Question

Tôi muốn hiển thị hộp cảnh báo nhưng trong một khoảng thời gian nhất định. Có thể trong JavaScript?

Answer 1

Nếu bạn muốn một cảnh báo xuất hiện sau một nhất định về thời gian, bạn có thể sử dụng mã này:

setTimeout(function() { alert("my message"); }, time); 

Nếu bạn muốn một cảnh báo xuất hiện và biến mất sau một khoảng thời gian quy định đã trôi qua, sau đó bạn không may mắn. Khi alert bị kích hoạt, trình duyệt sẽ ngừng xử lý mã javascript cho đến khi người dùng nhấp vào "ok". Điều này xảy ra lần nữa khi một số confirm hoặc prompt được hiển thị.

Nếu bạn muốn hành vi xuất hiện/biến mất, thì tôi khuyên bạn nên sử dụng một cái gì đó như jQueryUI's dialog widget. Đây là một ví dụ nhanh về cách bạn có thể sử dụng nó để đạt được hành vi đó.

var dialog = $(foo).dialog('open'); 
setTimeout(function() { dialog.dialog('close'); }, time); 

Answer 2

setTimeout(function () { alert("moo"); }, 10000); //displays msg in 10 seconds 

Answer 3

Tóm lại, câu trả lời là không. Khi bạn hiển thị mã số alert, confirm hoặc prompt, tập lệnh không còn có quyền kiểm soát cho đến khi người dùng trả về kiểm soát bằng cách nhấp vào một trong các nút.

Để thực hiện những gì bạn muốn, bạn sẽ muốn sử dụng các phần tử DOM như div và hiển thị, sau đó ẩn nó sau một thời gian nhất định. Nếu bạn cần phải được phương thức (chiếm trên trang, cho phép không có thêm hành động), bạn sẽ phải làm công việc bổ sung.

Bạn có thể sử dụng một trong nhiều thư viện "hộp thoại" trên mạng. Một điều lưu ý đến ngay lập tức là jQuery UI Dialog widget

Answer 4

Nếu bạn đang tìm kiếm cảnh báo sẽ biến mất sau một khoảng thời gian bạn có thể thử tiện ích Hộp thoại giao diện người dùng jQuery.

Answer 5

Có thể là quá muộn nhưng đoạn mã sau hoạt động tốt

document.getElementById('alrt').innerHTML='<b>Please wait, Your download will start soon!!!</b>'; 
setTimeout(function() {document.getElementById('alrt').innerHTML='';},5000); 

<div id='alrt' style="fontWeight = 'bold'"></div> 

Answer 6

tooltips có thể được sử dụng như cảnh báo. Đây có thể được hẹn giờ để xuất hiện và biến mất.

Có thể sử dụng CSS để tạo chú giải công cụ và menu. Thông tin thêm về điều này có thể được tìm thấy trong 'Javascript for Dummies'. Xin lỗi về nhãn của cuốn sách này ... Không gây bất cứ điều gì.

Đọc câu trả lời của người khác ở đây, tôi nhận ra câu trả lời cho những suy nghĩ/câu hỏi của riêng tôi. SetTimeOut có thể được áp dụng cho chú giải công cụ. Javascript có thể kích hoạt chúng.

Answer 7

Tôi đã hoàn thành cảnh báo thời gian của mình bằng hiệu ứng không mong muốn .... Trình duyệt sẽ thêm nội dung vào cửa sổ. Kịch bản của tôi là một kịch bản và tôi sẽ hiển thị sau văn bản sau.

Tôi đã tìm thấy tập lệnh CSS cho quảng cáo, không có nội dung trình duyệt không mong muốn. Điều này được viết bởi Prakash: - https://codepen.io/imprakash/pen/GgNMXO. Kịch bản này tôi sẽ hiển thị sau văn bản sau.

Tập lệnh CSS này trông rất chuyên nghiệp và có nhiều gọn gàng hơn. Nút này có thể là hình ảnh biểu tượng công ty có thể nhấp. Bằng cách triệt tiêu nút/hình ảnh này khi chạy một hàm, điều này có nghĩa là bạn có thể chạy hàm này từ bên trong javascript hoặc gọi nó bằng CSS, không có nó được chạy bằng cách bấm vào nó.

Cảnh báo bật lên này nằm trong cửa sổ bật lên. Vì vậy, nếu bạn là một đa tác vụ, bạn sẽ không gặp khó khăn khi biết cảnh báo đi với những gì cửa sổ.

Các báo cáo ở trên là những giá trị hợp lệ .... (Vui lòng cho phép). Làm thế nào để đạt được điều này sẽ được giảm xuống để thử nghiệm, vì kiến ​​thức về CSS của tôi bị hạn chế vào lúc này, nhưng tôi học nhanh.

Trình đơn CSS/DHTML sử dụng di chuột qua (tuyên bố hợp lệ).

Tôi có một tập lệnh trình đơn CSS của riêng mình được chỉnh sửa từ 'Javascript cho núm vú giả' bật lên một cảnh báo menu. Điều này làm việc, nhưng kích thước văn bản bị hạn chế. Điều này ẩn dưới biểu ngữ cửa sổ trên cùng. Điều này có thể được đặt thành cảnh báo theo thời gian. Đây không phải là tuyệt vời, nhưng tôi sẽ hiển thị điều này sau văn bản sau.

Kịch bản Prakash ở trên tôi cảm thấy có thể là câu trả lời nếu bạn có thể điều chỉnh nó.

Các tập lệnh sau: - Cảnh báo thời gian được điều chỉnh theo thời gian của tôi, tập lệnh bật lên CSS của Prakash, cảnh báo menu được hẹn giờ của tôi.

1.

<html> 
     <head> 
      <title></title> 
      <script language="JavaScript"> 
     // Variables 
      leftposition=screen.width-350 
      strfiller0='<table border="1" cellspacing="0" width="98%"><tr><td><br>'+'Alert: '+'<br><hr width="98%"><br>' 
      strfiller1='&nbsp;&nbsp;&nbsp;&nbsp; This alert is a timed one.'+'<br><br><br></td></tr></table>' 
      temp=strfiller0+strfiller1 
     // Javascript 
      // This code belongs to Stephen Mayes Date: 25/07/2016 time:8:32 am 


      function preview(){ 
          preWindow= open("", "preWindow","status=no,toolbar=no,menubar=yes,width=350,height=180,left="+leftposition+",top=0"); 
          preWindow.document.open(); 
          preWindow.document.write(temp); 
          preWindow.document.close(); 
        setTimeout(function(){preWindow.close()},4000); 
      } 

      </script> 
     </head> 
<body> 
    <input type="button" value=" Open " onclick="preview()"> 
</body> 
</html> 

2.

<style> 
body { 
    font-family: Arial, sans-serif; 
    background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat; 
    background-size: cover; 
    height: 100vh; 
} 

h1 { 
    text-align: center; 
    font-family: Tahoma, Arial, sans-serif; 
    color: #06D85F; 
    margin: 80px 0; 
} 

.box { 
    width: 40%; 
    margin: 0 auto; 
    background: rgba(255,255,255,0.2); 
    padding: 35px; 
    border: 2px solid #fff; 
    border-radius: 20px/50px; 
    background-clip: padding-box; 
    text-align: center; 
} 

.button { 
    font-size: 1em; 
    padding: 10px; 
    color: #fff; 
    border: 2px solid #06D85F; 
    border-radius: 20px/50px; 
    text-decoration: none; 
    cursor: pointer; 
    transition: all 0.3s ease-out; 
} 
.button:hover { 
    background: #06D85F; 
} 

.overlay { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0, 0, 0, 0.7); 
    transition: opacity 500ms; 
    visibility: hidden; 
    opacity: 0; 
} 
.overlay:target { 
    visibility: visible; 
    opacity: 1; 
} 

.popup { 
    margin: 70px auto; 
    padding: 20px; 
    background: #fff; 
    border-radius: 5px; 
    width: 30%; 
    position: relative; 
    transition: all 5s ease-in-out; 
} 

.popup h2 { 
    margin-top: 0; 
    color: #333; 
    font-family: Tahoma, Arial, sans-serif; 
} 
.popup .close { 
    position: absolute; 
    top: 20px; 
    right: 30px; 
    transition: all 200ms; 
    font-size: 30px; 
    font-weight: bold; 
    text-decoration: none; 
    color: #333; 
} 
.popup .close:hover { 
    color: #06D85F; 
} 
.popup .content { 
    max-height: 30%; 
    overflow: auto; 
} 

@media screen and (max-width: 700px){ 
    .box{ 
    width: 70%; 
    } 
    .popup{ 
    width: 70%; 
    } 
} 
</style> 
<script> 
    // written by Prakash:- https://codepen.io/imprakash/pen/GgNMXO 
</script> 
<body> 
<h1>Popup/Modal Windows without JavaScript</h1> 
<div class="box"> 
    <a class="button" href="#popup1">Let me Pop up</a> 
</div> 

<div id="popup1" class="overlay"> 
    <div class="popup"> 
     <h2>Here i am</h2> 
     <a class="close" href="#">&times;</a> 
     <div class="content"> 
      Thank to pop me out of that button, but now i'm done so you can close this window. 
     </div> 
    </div> 
</div> 
</body> 

3.

<HTML> 
<HEAD> 
<TITLE>Using DHTML to Create Sliding Menus (From JavaScript For Dummies, 4th Edition)</TITLE> 
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> 
<!-- Hide from older browsers 

function displayMenu(currentPosition,nextPosition) { 

    // Get the menu object located at the currentPosition on the screen 
    var whichMenu = document.getElementById(currentPosition).style; 

    if (displayMenu.arguments.length == 1) { 
     // Only one argument was sent in, so we need to 
     // figure out the value for "nextPosition" 

     if (parseInt(whichMenu.top) == -5) { 
      // Only two values are possible: one for mouseover 
      // (-5) and one for mouseout (-90). So we want 
      // to toggle from the existing position to the 
      // other position: i.e., if the position is -5, 
      // set nextPosition to -90... 
      nextPosition = -90; 
     } 
     else { 
      // Otherwise, set nextPosition to -5 
      nextPosition = -5; 
     } 
    } 

    // Redisplay the menu using the value of "nextPosition" 
    whichMenu.top = nextPosition + "px"; 
} 

// End hiding--> 
</SCRIPT> 

<STYLE TYPE="text/css"> 
<!-- 

.menu {position:absolute; font:10px arial, helvetica, sans-serif; background-color:#ffffcc; layer-background-color:#ffffcc; top:-90px} 
#resMenu {right:10px; width:-130px} 
A {text-decoration:none; color:#000000} 
A:hover {background-color:pink; color:blue} 

--> 

</STYLE> 

</HEAD> 

<BODY BGCOLOR="white"> 

<div id="resMenu" class="menu" onmouseover="displayMenu('resMenu',-5)" onmouseout="displayMenu('resMenu',-90)"><br /> 
<a href="#"> Alert:</a><br> 
<a href="#"> </a><br> 
<a href="#"> You pushed that button again... Didn't yeah? </a><br> 
<a href="#"> </a><br> 
<a href="#"> </a><br> 
<a href="#"> </a><br> 
</div> 
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd 
<input type="button" value="Wake that alert up" onclick="displayMenu('resMenu',-5)"> 
</BODY> 
</HTML>