Я хочу отобразить окно предупреждения, но на определенный интервал. Возможно ли это в JavaScript?
Блок предупреждения JavaScript с таймером
Ответ 1
Если вы хотите, чтобы предупреждение появлялось после определенного времени, вы можете использовать этот код:
setTimeout(function() { alert("my message"); }, time);
Если вы хотите, чтобы предупреждение появлялось и исчезало по прошествии определенного интервала, вам не повезло. При запуске alert браузер перестает обрабатывать код javascript, пока пользователь не наберет "ok". Это происходит снова, когда отображается confirm или prompt.
Если вы хотите, чтобы появилось/исчезло поведение, я бы рекомендовал использовать что-то вроде jQueryUI диалогового виджета. Вот краткий пример того, как вы можете использовать его для достижения такого поведения.
var dialog = $(foo).dialog('open');
setTimeout(function() { dialog.dialog('close'); }, time);
Ответ 2
Может быть, слишком поздно, но следующий код отлично работает
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>
Ответ 3
setTimeout( function ( ) { alert( "moo" ); }, 10000 ); //displays msg in 10 seconds
Ответ 4
Короче говоря, ответ - нет. Когда вы показываете alert, confirm или prompt, script больше не имеет контроля до тех пор, пока пользователь не вернет управление, нажав одну из кнопок.
Чтобы сделать то, что вы хотите, вы захотите использовать элементы DOM, такие как div и показать, а затем скрыть его по истечении заданного времени. Если вам нужно быть модальным (берет на себя страницу, не требуя дальнейших действий), вам придется выполнять дополнительную работу.
Конечно, вы можете использовать одну из многочисленных "диалоговых" библиотек. То, что сразу приходит в голову, это jQuery UI Dialog виджет
Ответ 5
Если вы ищете предупреждение, которое исчезает после интервала, вы можете попробовать виджет jQuery UI Dialog.
Ответ 6
Подсказкимогут использоваться как оповещения. Они могут появляться и исчезать.
CSS можно использовать для создания всплывающих подсказок и меню. Более подробную информацию об этом можно найти в "Javascript for Dummies". Извините за ярлык этой книги... Ничего не застраховав.
Читая ответы других народов здесь, я понял ответ на мои собственные мысли/вопросы. SetTimeOut можно применить к подсказкам. Javascript может вызвать их.
Ответ 7
Я закончил свое оповещение о времени с нежелательным эффектом... Браузеры добавляют материал в окна. Мой script является аптатированным, и я покажу его после следующего текста.
Я нашел CSS script для всплывающих окон, в которых нет нежелательных материалов браузера. Это было написано Пракашем: - https://codepen.io/imprakash/pen/GgNMXO. Этот script я покажу после следующего текста.
Этот CSS script выше выглядит профессионально и намного опрятен. Эта кнопка может быть кликабельным логотипом компании. Путем подавления этой кнопки/изображения от запуска функции это означает, что вы можете запустить эту функцию из javascript или вызвать ее с помощью CSS без ее запуска, щелкнув по ней.
Это всплывающее предупреждение остается в окне, которое появилось. Поэтому, если вы многозадачник, вам не составит труда узнать, какое предупреждение отправляется с каким окном.
Вышеприведенные утверждения действительны. (Разрешите). То, как они достигнуты, сводится к экспериментированию, поскольку мои знания CSS в настоящий момент ограничены, но я быстро учусь.
Меню CSS/DHTML используют mouseover (действительный оператор).
У меня есть меню CSS script моего, которое адаптировано из "Javascript для манекенов", в котором появляется предупреждение меню. Это работает, но размер текста ограничен. Это скрывается под заголовком верхнего окна. Это можно настроить как оповещение по времени. Это не очень хорошо, но я покажу это после следующего текста.
The Prakash script выше, на мой взгляд, может быть ответом, если вы можете его адаптировать.
Скрипты, которые следуют: - Мое настроенное окно с предупреждением о времени, всплывающее окно Prakash CSS script, мое предупреждение о временном меню.
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=' 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="#">×</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>