JavaScript-Alarmbox mit Timer

Möchte ich die Anzeige der alert-box aber für ein bestimmtes Intervall. Ist es möglich in JavaScript?

InformationsquelleAutor der Frage RKh | 2009-12-26

  1. 27

    Wenn Sie möchten, dass eine Warnung angezeigt werden, nachdem eine bestimmte Zeit, können Sie diesen code verwenden:

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

    Wenn Sie möchten, dass eine Warnung angezeigt und verschwinden nach einem bestimmten Intervall abgelaufen ist, dann hast du Pech. Wenn ein alert gefeuert hat, wird der browser beendet die Verarbeitung der javascript-code, bis der Benutzer klickt auf "ok". Dies geschieht immer, wenn ein confirm oder prompt angezeigt.

    Wenn Sie wollen, erscheinen/verschwinden Verhalten, dann würde ich empfehlen, mit so etwas wie jQueryUI dialog-widget. Hier ein kurzes Beispiel, wie könnten Sie es verwenden, um zu erreichen, dass Verhalten.

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

    InformationsquelleAutor der Antwort Xavi

  2. 7

    Kann sein das es zu spät, aber der folgende code funktioniert einwandfrei

    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>

    InformationsquelleAutor der Antwort user3833678

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

    InformationsquelleAutor der Antwort Bjorn Tipling

  4. 1

    Kurz gesagt, die Antwort ist Nein. Sobald Sie zeigen eine alertconfirm oder prompt das Skript hat nicht mehr die Kontrolle, bis der Benutzer wieder die Kontrolle, indem Sie auf eine der Schaltflächen.

    Tun, was Sie wollen, werden Sie wollen, verwenden Sie DOM-Elemente wie ein div und zeigen, dann verbergen Sie es nach einer bestimmten Zeit. Wenn Sie unbedingt modal sein (übernimmt die Seite, so dass keine weiteren Maßnahmen), müssen Sie zusätzliche Arbeit.

    Könnte man natürlich auch einen der vielen "dialog" - Bibliotheken gibt. Man kommt sofort in den Sinn ist die jQuery UI Dialog widget

    InformationsquelleAutor der Antwort Doug Neiner

  5. 1

    Beendete ich mein Zeit-Alarm mit einem unerwünschten Effekt.... Browser-add Zeug, um windows. Mein script ist ein aptated ein, und ich werde zeigen, nachdem Sie den folgenden text.

    Fand ich ein CSS-script für die popups, die nicht über unerwünschte browser-Zeug. Dies wurde geschrieben von Prakash:- https://codepen.io/imprakash/pen/GgNMXO. Dieses Skript werde ich zeigen, nachdem Sie den folgenden text.

    Dieses CSS script oben sieht Professionell aus und ist viel mehr aufgeräumt. Diese Taste könnte eine anklickbare Firma logo. Durch die Unterdrückung dieser Taste/Bild-ab ausführen einer Funktion, das heißt, Sie können ausführen dieser Funktion in javascript oder rufen Sie es mit CSS, ohne dass es ausgeführt wird, indem Sie es anklicken.

    Diese popup-Warnung bleibt im Fenster, knallte es. Also, wenn Sie ein multi-tasker, die Sie nicht haben Schwierigkeiten zu wissen, was die Warnung geht mit dem, was Fenster.

    Die oben genannten Anweisungen sind gültige.... (Bitte erlauben).
    Wie diese erreicht wird, werden nach unten zu Experimentieren, da meine Kenntnisse in CSS ist begrenzt im moment, aber ich Lerne schnell.

    CSS-Menüs/DHTML verwenden mouseover(gültige Anweisung).

    Ich habe ein CSS-Menü-script von meiner eigenen, die angepasst ist, von 'Javascript für dummies' , erscheint ein Menü Alarm. Dies funktioniert, aber die text-Größe ist begrenzt. Dieses verbirgt sich unter dem oberen Fenster banner. Dies könnte zeitlich alert. Das ist nicht toll, aber ich will zeigen das nach dem folgenden text.

    Den Prakash Skript oben habe ich das Gefühl, könnte die Antwort sein, wenn Sie anpassen können.

    Skripte, die Folgen:- Meine angepasst timed-Fenster-Alarm, Prakash CSS-popup-script, meine timed Menü Alarm.

    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>

    InformationsquelleAutor der Antwort Steve

  6. 0

    Wenn Sie auf der Suche für ein alert, dass Sie verschwindet nach einer Pause könnten Sie versuchen, den jQuery UI Dialog widget.

    InformationsquelleAutor der Antwort Adnan Hussein

  7. 0

    tooltips können verwendet werden als Warnungen. Diese können zeitlich, zu erscheinen und verschwinden.

    CSS kann verwendet werden, um tooltips und Menüs. Mehr info dazu finden Sie in der 'Javascript für Dummies'. Sorry für die Bezeichnung von diesem Buch... Nicht infuring nichts.

    Lesen andere Völker Antworten hier, erkannte ich die Antwort auf meine Gedanken/Fragen. SetTimeOut angewandt werden könnten, um tooltips. Javascript auslösen könnte.

    InformationsquelleAutor der Antwort Steve

Schreibe einen Kommentar