Alert язык сценариев JavaScript с Temporizador

Как я могу делать, чтобы создавать Alert в языке сценариев JavaScript, который был бы виден из-за 2 секунд и потом (одинокое) автоматическое отключение без того, чтобы пользователь кликнул в соглашении?

7
задан 23.08.2016, 23:31
6 ответов

Я это делаю с функцией setTimeout. Следующей формы.

$('#alert').fadeIn();     
  setTimeout(function() {
       $("#alert").fadeOut();           
  },2000);
2
ответ дан 24.11.2019, 13:35

Я представляю тебя Toastr, это одна librerГ - в в JavaScript, которые производят извещения способа" современные ":

toastr.options = {
  "debug": false,
  "positionClass": "toast-bottom-right",
  "onclick": null,
  "fadeIn": 300,
  "fadeOut": 100,
  "timeOut": 5000,
  "extendedTimeOut": 1000
}

var showToastrs = false;

function toastrs() {
  if (!showToastrs) {
    toastr.error('Estamos bajo ataque DDoS', 'Error Critico!');
    toastr.success('Se guardaron los cambios satisfactoriamente', 'Todo en orden');
    toastr.warning('La latencia del server esta aumentando.', 'Alerta!');
  } else {
    toastr.error('no se puede!\'t.', 'Otro error crítico');
  }
}

// Definimos los callback cuando el TOAST le da un fade in/out:
toastr.options.onFadeIn = function() {
  showToastrs = true;
};
toastr.options.onFadeOut = function() {
  showToastrs = false;
};

$(function() {
  $("#clear").on("click", function() {
    // Clears the current list of toasts
    toastr.clear();
  });
  $("#rewind").on("click", function() {
    // show toastrs :)
    toastrs();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://codeseven.github.com/toastr/toastr.js"></script>
<link href="http://codeseven.github.com/toastr/toastr.css" rel="stylesheet"/>
<link href="http://codeseven.github.com/toastr/toastr-responsive.css" rel="stylesheet"/>
<a href="http://codeseven.github.io/toastr/demo.html" target="_blank">Toastr official demo</a>
<br/>
<br/>
<input id="clear" type="submit" value="Limpiar notificaciones">
<input id="rewind" type="submit" value="Mostrar notificaciones">
5
ответ дан 24.11.2019, 13:35
  • 1
    Это cool, не conoc и # 237; в Toastr, много вкуса! =), я думаю, что это это использует в каких-то проектах! спасибо за informaci и # 243; n. – Jorgesys♦ 24.08.2016, 01:56
  • 2
    ничего @Elenasys, мы расположены служить: D – fredyfx 24.08.2016, 02:29

Я вижу, что ты хочешь открыться и закрыть сообщение, с Javascript это не может осуществляться, закрывать сообщение должно быть вручную.

Как другой выбор состоит в том, чтобы показывать окно с сообщением и закрывать ее автоматически 2 секунды спустя (2000 м).

<html>
<body>

<p>Abre un mensaje que se cerrara en 2 segundos.</p>

<button onclick="ejecutaAlerta()">muestra mensaje</button>

<script>
function ejecutaAlerta() {   
var w = window.open('','','width=100,height=100')
w.document.write('Hola StackOverflow!')
w.focus()
setTimeout(function() {w.close();}, 2000)
}
</script>

</body>
</html>

Тот, кто реализует названный функции, - метод setTimeOut ():

setTimeout () Выполни функцию, ждали в течение специфического числа миллисекунд.

4
ответ дан 24.11.2019, 13:35
  • 1
    OP хочет другую вещь, хочет, чтобы сообщение пребывало две секунды видимо, и не взамен, что медлил две секунды с тем, чтобы появляться. – rnrneverdies 24.08.2016, 04:51
  • 2
    Спасибо, я удалил второй opci и # 243; n, что не выполнял того, что требует OP. – Jorgesys♦ 24.08.2016, 05:37

Другой выбор, который может подавать тебя, JQuery jGrowl

Я оставляю тебе пример с продолжительностью службы 2 секунд:

$.jGrowl("Hello world!",{ life : 2000});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.js"></script>

если ты требуешь чего-то более "современного", я рекомендую тебя toastr

3
ответ дан 24.11.2019, 13:35

Он мне нравится она soluciГіn @fredyfx, но если для тебя имеет значение скорость груза и средства, использованные твоим app, ты можешь осуществлять что-то сходное в меньшем количестве байтов помещая только функции, которые ты будешь использовать.

Восток - пример, просвет, что ты можешь налаживать стили в нее estГ©tica тебя aplicaciГіn и можешь добавлять больше features. Это основание, чтобы писать твой собственный компонент, не будучи должен загружать длинные librerГ-туз, который они заканчиваются тяжелыми применениями.

(function(window, document) { // asilamos el componente
  // creamos el contedor de las tostadas o la tostadora
  var container = document.createElement('div');
  container.className = 'toast-container';
  document.body.appendChild(container);
  
  // esta es la funcion que hace la tostada
  window.doToast = function(message) {
    // creamos tostada
    var toast = document.createElement('div');
    toast.className = 'toast-toast';
    toast.innerHTML = message;

    // agregamos a la tostadora
    container.appendChild(toast);    

    // programamos su eliminación
    setTimeout(function() {
      // cuando acabe de desaparecer, lo eliminamos del dom.
      toast.addEventListener("transitionend", function() {
         container.removeChild(toast);
      }, false);

      // agregamos un estilo que inicie la "transition". 
      toast.classList.add("fadeout");      
    }, 2000); // OP dijo, "solo dos segundos"
  }
})(window, document);

// ejempo de uso
doToast("Hola mundo!");

// ejemplo retardado de uso
setTimeout(function() {
   doToast("Soy una tostada");
}, 1200);
.toast-container {
  position: fixed;
  width: 150px;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10; /* sobre todo lo demás */
}

.toast-toast {
  font-size: 250%;
  margin-bottom: 3px;
  border-radius: 2px;
  border: 1px green;
  background: #98FF98;
  text-align: center;
  line-height: 1;  
  transition: all 0.5s; 
}

.fadeout{
  opacity: 0;
}
3
ответ дан 24.11.2019, 13:35
  • 1
    как dir и # 237; an в твоей земле: sos босс: D – fredyfx 24.08.2016, 06:54

Со стандартным alert javascript я сомневаюсь, что ты можешь реализовывать это, но если ты используешь alert, осуществленный с jquery, как

краев -

jqAlert в примере, что осуществлять один timer, например тот титула Alert Dialogs определяет

$.alert('jqAlert is easy to use with alerts and its where I got my start.', {
    title:'Alert Title Message',
    icon:'',
    customIcon:'icon-asterisk',
    exception: 'Exception',
    stack: 'Stack Trace',
    timer:5000,
    onTimeout:function() { },
    onClose: function() { },
    buttons:[
        {
            title:'Press Me',
            callback:function() { $(this).dialog("close");}
        }
    ]
});

краев timer:5000 это время спустя, закрывается только

2
ответ дан 24.11.2019, 13:35