como - jquery ui widget

¿Cómo activar y desactivar una alerta de arranque con un clic de botón? (9)

Acabo de usar una variable modelo para mostrar / ocultar el diálogo y eliminé el data-dismiss = "alert"

p.ej

<div data-ng-show="vm.result == ''error''" class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-ng-click="vm.result = null" aria- hidden="true">×</button> Error ! {{vm.exception}} </div>

trabaja para mí y detiene la necesidad de salir a jquery

Quiero mostrar un cuadro de alerta varias veces con un evento de clic de botón sin tener que actualizar la página, pero el cuadro de alerta solo aparece una vez. Si quiero volver a mostrar el cuadro de alerta, tengo que actualizar la página.

Actualmente, si representa una alerta de arranque en la página, cuando la cierra, el contenedor de div de la alerta ya no está en la página. Entonces, cuando haces clic en el botón otra vez, ya no aparece. He estado haciendo lo siguiente en el botón de cerrar para ocultarlo en lugar de eliminar el contenedor div de alerta.

<button class="close" onclick="$(''#alertBox'').hide();; return false;">×</button>

Me pregunto si usar data-toggle o data-dismiss en bootstrap puede hacer que este tipo de efecto de alternar funcione sin pasar por mis propios manejadores de Javascript personalizados.

En realidad, deberías considerar usar algo como esto:

$(''#the-thing-that-opens-your-alert'').click(function () { $(''#le-alert'').addClass(''in''); // shows alert with Bootstrap CSS3 implem }); $(''.close'').click(function () { $(this).parent().removeClass(''in''); // hides alert with Bootstrap CSS3 implem });

Como bootstrap fade / in usa CSS3 en lugar de Jquery hide / show en Javascript completo. Mi punto es que en dispositivos móviles, CSS3 es más rápido que Js.

Y tu HTML debería verse así:

<a id="the-thing-that-opens-your-alert" href="#">Open my alert</a> <div id="le-alert" class="alert alert-warn alert-block fade"> <button href="#" type="button" class="close">×</button> <h4>Alert title</h4> Roses are red, violets are blue... </div>

¡Y esto es genial! Verifíquelo en jsFiddle =)

He tenido el mismo problema: simplemente no use los data-dismiss el botón de cerrar y trabaje con JQuery show() y hide() :

$(''.close'').click(function() { $(''.alert'').hide(); })

Ahora puede mostrar la alerta al hacer clic en un botón con el código:

$(''.alert'').show()

¡Espero que esto ayude!

No necesita usar jquery para lograr esto, aquí hay una solución de solo arranque.

El botón de encendido / apagado:

<button type="button" class="btn" data-toggle="collapse" href="#my-alert-box"> </button>

La alerta con un botón de cerrar que oculta la alerta (igual que al hacer clic en el botón mostrar / ocultar):

<div id="my-alert-box" class="alert alert-info collapse" role="alert"> <button type="button" class="close" data-toggle="collapse" href="#my-alert-box"> </button> Look, here''s a show/hide alert box without jquery... </div>

Para mostrar / ocultar puede hacer esto como en la respuesta aceptada:

He tenido el mismo problema: simplemente no use los data-dismiss el botón de cerrar y trabaje con JQuery show() y hide() :
$(''.close'').click(function() { $(''.alert'').hide(); })
Ahora puede mostrar la alerta al hacer clic en un botón con el código:
$(''.alert'').show()
¡Espero que esto ayude!

O lo que estaba intentando hacer era crear una alerta colapsable que colapse la alerta y aún muestre el encabezado, por ejemplo. Hice esto para poder position:fixed; y luego mostrar el otro contenido de contenido. Sin embargo, esto fue difícil de hacer, así que creé una solución alternativa. Al hacer clic en el botón de cerrar, se configuraría la ventana emergente display:none; y luego, al principio, cuando esté en la parte superior, es posible que deba evitar que cubra inicialmente el contenido, por lo que agregué saltos de línea que se mostrarían / ocultarían de acuerdo con la visualización de la alerta. por lo tanto, 2 avisa que uno al hacer clic en Cerrar, display:none; y luego mostrar la otra ventana emergente que tiene solo una línea de contenido. cuando se hacía clic en esta ventana emergente, se configuraba la alerta principal para display:block; así como los saltos de línea en concordancia. Aquí está el código, ahora que la explicación está completa:

function ShowALERT() { document.getElementById(''ALERT'').style.display = "block"; document.getElementById(''ShowALERT'').style.display = "none"; document.getElementById(''breakShowALERT'').style.display = "none"; document.getElementById(''breakALERT'').style.display = "block"; } function closeALERT() { document.getElementById(''ALERT'').style.display = "none"; document.getElementById(''breakShowALERT'').style.display = "block"; document.getElementById(''ShowALERT'').style.display = "block"; document.getElementById(''breakALERT'').style.display = "none"; }

#ALERT { position:fixed; display:block; width:100%; z-index:1; left:0px; top:0px; } #ShowALERT { position: fixed; display:none; z-index:1; top:0px; left:0px; width: 100%; } #breakShowALERT { display:none; } #breakALERT { display:block; }

Puedes agregar la clase .hidden a tu alerta y luego a toogle it. Ver: JSFiddle

HTML

<a id="show-my-alert" href="#">Show Alert</a> <div id="my-alert" class="alert alert-warning hidden" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> × </button> Warning! Better check yourself, you''re not looking too good. </div>

JavaScript

$("#show-my-alert, .close").click(function() { $("#my-alert").toggleClass("hidden"); });

También puedes probar esto:

$("#MyBtn").click(function() { if($("#MyAlrt").is(":visible")){ $("#MyAlrt").hide(); }else{ $("#MyAlrt").show(); } });

Funcionó muy bien para mí.

Usé el siguiente enfoque de trabajo basado en la solución de Leiko.

$(document).ready(function(){ $("#btnFV").click(function() { $("#alertFV").addClass("in"); }); $("#alertFV").on("close.bs.alert", function () { $("#alertFV").removeClass("in"); return false; }); });

El cuerpo de HTML contiene una alerta inferior

<button id="btnFV" class="form-control">Button To Show/Hide Alert</button> <div id="alertFV" class="alert alert-danger alert-dismissable fade show"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> × </button> Danger! </div>

$(document).on(''click'', ''.close'', function() { $(''.alert'').hide(); });

está disponible para todos los elementos, incluido nuevo elemento