Boîte d'alerte JavaScript avec minuterie

Je veux afficher la boîte d'alerte, mais pour un certain intervalle. Est-il possible en JavaScript?

Pouvez-vous préciser? Voulez-vous dire que vous voulez qu'il reste visible pendant un certain temps, puis se cacher automatiquement? Ou voulez-vous attendre un peu, puis afficher la boîte d'alerte?
Les anciens, je pense.
Ya je voulais dire l'ancien.

InformationsquelleAutor RKh | 2009-12-26

33

Si vous voulez une alerte apparaissent après un certain temps, vous pouvez utiliser ce code:
```
setTimeout(function() { alert("my message"); }, time);
```
Si vous voulez une alerte apparaissent et disparaissent après un intervalle de temps spécifié s'est écoulé, alors vous êtes hors de la chance. Lorsqu'un alert a déclenché, le navigateur arrête le traitement du code javascript jusqu'à ce que l'utilisateur clique sur "ok". Cela se produit lorsqu'un confirm ou prompt est indiqué.

Si vous le souhaitez apparaître/disparaître le comportement, alors je vous recommande d'utiliser quelque chose comme jQueryUI du dialogue widget. Voici un exemple rapide sur comment vous pouvez l'utiliser pour obtenir ce comportement.
```
var dialog = $(foo).dialog('open');
setTimeout(function() { dialog.dialog('close'); }, time);
```
InformationsquelleAutor Xavi

Il est peut-être trop tard, mais le code suivant fonctionne très bien

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>

Pour info, Le "5000" ci-dessus est en millisecondes.

InformationsquelleAutor user3833678

7
```
setTimeout( function ( ) { alert( "moo" ); }, 10000 ); //displays msg in 10 seconds
```
- Je ne pense pas que ça va marcher. Le code va juste afficher une alerte qui dit "undefined". C'est parce que lorsque le délai de rappel invoquer, aucun paramètre n'est passé.
- Quoi? Il fonctionne très bien. Bien sûr, vous avez à mettre msg pour quelque chose.
- Oh oui, vous avez raison. Bon appel.
- BJorn Merci pour la réponse. mais je veux boîte d'alerte disparaît après l'intervalle de temps.
- des boîtes d'alerte sont basé sur le navigateur des boîtes de dialogue modales et ne sont pas amovibles avec JavaScript. Vous pouvez utiliser de l'HTML et de créer un navigateur en fonction d'alerte. Parfois, les gens se réfèrent à ce qu'un dom popup.
- Grâce Bjorn je vais essayer au cours de cette.
InformationsquelleAutor Bjorn Tipling
1

En bref, la réponse est non. Une fois que vous montrez un alert, confirm, ou prompt le script n'a plus le contrôle jusqu'à ce que l'utilisateur rentre de contrôle en cliquant sur l'un de ces boutons.

De faire ce que vous voulez, vous souhaitez utiliser des éléments du DOM comme un div et de montrer, puis le cacher au bout d'un certain temps. Si vous avez besoin d'être modale (reprend la page, ce qui permet, aucune autre action), vous aurez à faire un travail supplémentaire.

Vous pouvez bien sûr utiliser l'un des nombreux "dialogue" bibliothèques. Celui qui me vient à l'esprit immédiatement est la jQuery UI widget de Dialogue

InformationsquelleAutor Doug Neiner

J'ai fini mon alerte en temps avec un effet indésirable.... Les navigateurs ajouter des trucs pour windows. Mon script est un aptated un et je vais le montrer après le texte suivant.

J'ai trouvé un script CSS pour les popups, qui n'a pas de navigateur non désirés des trucs. Ceci a été écrit par Prakash:- https://codepen.io/imprakash/pen/GgNMXO. Ce script, je vais voir après le texte suivant.

Cette CSS script ci-dessus a l'air professionnel et est beaucoup plus élégante. Ce bouton peut être cliquable logo de la société de l'image. Par la suppression de ce bouton/image à partir de l'exécution d'une fonction, cela signifie que vous pouvez exécuter cette fonction à partir de l'intérieur de javascript ou de l'appeler avec CSS, sans qu'il soit exécuté en cliquant dessus.

Ce popup d'alerte reste à l'intérieur de la fenêtre qui l'a déclenché. Donc, si vous êtes un multi-tasker, vous n'aurez pas de difficulté à comprendre ce que l'alerte est ce qu'fenêtre.

Les déclarations ci-dessus sont valables.... (S'il vous plaît permettre).
Comment ceux-ci sont réalisés à l'expérimentation, que ma connaissance de CSS est limité pour l'instant, mais j'apprends vite.

Menus CSS/DHTML utiliser la souris(instruction).

J'ai un CSS menu script de mon propre qui est adaptée de "Javascript pour les nuls" qui affiche un menu d'alerte. Cela fonctionne, mais la taille du texte est limitée. Ce cache en dessous de la fenêtre du haut de la bannière. Cela pourrait être chronométré alerte. Ce n'est pas grand, mais je vais vous montrer ce après le texte suivant.

La Prakash script ci-dessus je me sens pourrait être la réponse si vous pouvez l'adapter.

Scripts qui suivent:- Mon adaptés chronométré fenêtre d'alerte, Prakash du popup CSS script, mon chronométré menu alerte.

<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>

<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>

<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>

InformationsquelleAutor Steve

0

Si vous êtes à la recherche d'une alerte qui disparaît après un intervalle, vous pouvez essayer les jQuery UI Dialog widget.

InformationsquelleAutor Adnan Hussein
0

les info-bulles peuvent être utilisés comme des alertes. Ces peut être programmée pour apparaître et disparaître.

CSS peut être utilisé pour créer des info-bulles et les menus. Plus d'infos sur ce qui peut être trouvé dans "le Javascript pour les Nuls". Désolé au sujet de l'étiquette de ce livre... Pas infuring quoi que ce soit.

En lisant d'autres peuples réponses ici, j'ai réalisé que la réponse à mes propres pensées ou des questions. SetTimeOut pourrait être appliquée à des info-bulles. Javascript pourrait les déclencher.
- Bienvenue à Débordement de Pile! Rappelez-vous que vous répondez à la question pour les lecteurs dans l'avenir, et ces personnes pourraient bénéficier grandement de quelques exemples, les méthodes que vous avez mentionné.
InformationsquelleAutor Steve

Vous devez vous connecter pour publier un commentaire.