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

Question

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 se ha ido de 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 el uso de datos de palanca o de datos en despedir de arranque puede hacer este tipo de efecto de palanca de trabajo sin tener que pasar a través de mis propias manipuladores de Javascript.

Answer 1

que he tenido el mismo problema: simplemente no utilizar el data-dismiss desde el botón de cierre y trabajar con jQuery show() y hide():

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

Ahora se puede mostrar la alerta cuando se hace clic en un botón mediante el uso de el código:

$('.alert').show() 

Espero que ayude!

Answer 2

En realidad, usted debe considerar el uso de 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 
}); 

se desvanecen a medida de arranque/usos en lugar de CSS3 jQuery ocultar/mostrar en su totalidad Javascript. Mi punto es que en dispositivos móviles, CSS3 es más rápido que Js.

Y el código HTML debe ve 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">&times;</button> 
    <h4>Alert title</h4> 
    <p>Roses are red, violets are blue...</p> 
</div> 

Y esto está muy bien! Comprobarlo en jsFiddle =)

Answer 3

simplemente he usado una variable del modelo para mostrar/ocultar el diálogo y quitó la técnica de despedir = "alerta"

por ejemplo

<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">&times;</button> 
    <strong>Error ! </strong>{{vm.exception}} 
</div> 

funciona para mí y para el que tenga que salir a jQuery

Answer 4

también puede probar esto:

$("#MyBtn").click(function() { 

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

}); 

Funcionó muy bien para mí.

Answer 5

Puede agregar la clase .hidden a su alerta y luego a toogle.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">  
     <span aria-hidden="true">&times;</span> 
    </button> 
    <strong>Warning!</strong> Better check yourself, you're not looking too good. 
</div> 

JavaScript

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

Answer 6

$(document).on('click', '.close', function() { 
 

 
    $('.alert').hide(); 
 

 
});

que es una disponible para todos los elementos, incluido el nuevo elemento

Answer 7

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

El botón on/off:

<button type="button" class="btn" data-toggle="collapse" href="#my-alert-box"> 
    <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> 
</button> 

La alerta con un botón de cierre que oculta la alerta (equivale a 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"> 
     <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
    </button> 
    <p>Look, here's a show/hide alert box without jquery...</p> 
</div> 

Answer 8

para ver/que ocultar podría hacer esto al igual que en la respuesta aceptada:

que he tenido el mismo problema: simplemente no utilice el data-dismiss desde el botón de cierre y wO rk con jQuery show() y hide():

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

Ahora usted puede mostrar la alerta cuando se hace clic en un botón mediante el código:

$('.alert').show() 

Espero que esto ayude!

O lo que estaba tratando de hacer era hacer una alerta colapsable que colapse la alerta y todavía muestre el encabezado, por ejemplo. Hice esto para poder hacerlo position:fixed; y luego mostrar el contenido del otro contenido. Sin embargo, esto fue difícil de hacer, así que creé una solución alternativa. Al hacer clic en el botón para cerrar, se configurará la ventana emergente display:none; y luego, al principio, cuando sea necesario para 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. así que 2 alerta que uno cuando haga clic en cerrar, display:none; y luego muestre la otra ventana emergente que tiene solo una línea de contenido. cuando se hizo clic en esta ventana emergente establecería la alerta principal en display:block;, así como los saltos de línea en concordancia. Aquí está el código, ahora que la explicación necesaria se realiza:

function ShowALERT() { 
 
    document.getElementById('ALERT').style.display = "block"; 
 
\t document.getElementById('ShowALERT').style.display = "none"; 
 
\t document.getElementById('breakShowALERT').style.display = "none"; 
 
\t document.getElementById('breakALERT').style.display = "block"; 
 
\t 
 
} 
 
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"; 
 
\t 
 
}

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

<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="container"> 
 
    <button id="ShowALERT" onclick="ShowALERT()" class="bg-primary"> 
 

 
\t <h5> <b>Important Alert</b></h5> 
 
</button> 
 
</div> 
 
<div class=container> 
 
    <div id="ALERT" class="alert bg-primary alert-dismissable"> 
 
<a href="#" class="close" onclick="closeALERT()" aria-label="close">Dismiss</a> 
 
<h5><b>Note:</b> Alert Content here......................</h5> 
 
</div> 
 
</div> 
 
<body> 
 
<div id='breakALERT'><br><br><br><br><br></div> 
 
\t \t \t \t \t <div id='breakShowALERT'><br><br></div> 
 
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p> 
 
</body>