javascript - not - El mensaje de alerta de Twitter Bootstrap se cierra y se abre de nuevo
notifications bootstrap (10)
Tengo un problema con los mensajes de alerta. Se muestra normalmente, y puedo cerrarlo cuando el usuario presiona x (cerrar), pero cuando el usuario intenta mostrarlo de nuevo (por ejemplo, hacer clic en el evento del botón), entonces no se muestra. (Además, si imprimo este mensaje de alerta en la consola, es igual a [] ). Mi código está aquí:
<div class="alert" style="display: none">
<a class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> Best check yo self, you''re not looking too good.
</div>
Y evento:
$(".alert").show();
¡PD! Necesito mostrar el mensaje de alerta solo después de que haya ocurrido algún evento (por ejemplo, se hizo clic en el botón). O lo que estoy haciendo mal?
Acabo de usar una variable modelo para mostrar / ocultar el diálogo y eliminé el data-dismiss="alert"
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">×</button>
<strong>Error ! </strong>{{vm.exception}}
</div>
trabaja para mí y detiene la necesidad de salir a jquery
Creo que un buen enfoque para este problema sería aprovechar el tipo de evento close.bs.alert de Bootstrap para ocultar la alerta en lugar de eliminarla. La razón por la que Bootstrap expone este tipo de evento es para que pueda sobrescribir el comportamiento predeterminado de eliminar la alerta del DOM.
$(''.alert'').on(''close.bs.alert'', function (e) {
e.preventDefault();
$(this).addClass(''hidden'');
});
El problema se debe al uso de style="display:none" , debe ocultar la alerta con Javascript o al menos al mostrarla, eliminar el atributo de estilo.
En función de las otras respuestas y el cambio de datos, descartar datos ocultos, este ejemplo maneja la apertura de la alerta desde un enlace y permite que la alerta se abra y se cierre repetidamente
$(''a.show_alert'').click(function() {
var $theAlert = $(''.my_alert''); /* class on the alert */
$theAlert.css(''display'',''block'');
// set up the close event when the alert opens
$theAlert.find(''a[data-hide]'').click(function() {
$(this).parent().hide(); /* hide the alert */
});
});
Entonces, si quieres una solución que pueda manejar páginas html dinámicas, como ya la incluyes, debes usar el Live de jQuery para configurar el controlador en todos los elementos que están ahora y en el futuro en el dominio o que se eliminen.
yo suelo
$(document).on("click", "[data-hide-closest]", function(e) {
e.preventDefault();
var $this = $(this);
$this.closest($this.attr("data-hide-closest")).hide();
});
.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d;
}
.alert {
border: 1px solid transparent;
border-radius: 4px;
margin-bottom: 20px;
padding: 15px;
}
.close {
color: #000;
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
opacity: 0.2;
text-shadow: 0 1px 0 #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-success">
<a class="close" data-hide-closest=".alert">×</a>
<strong>Success!</strong> Your entries were saved.
</div>
Estoy de acuerdo con la respuesta publicada por Henrik Karlsson y editada por Martin Prikryl. Tengo una sugerencia, basada en la accesibilidad. Agregaría .attr ("aria-hidden", "true") al final, para que se vea así:
$(this).closest("." + $(this).attr("data-hide")).attr("aria-hidden", "true");
He intentado todos los métodos y la mejor manera para mí es utilizar las clases de arranque .fade y .in
Ejemplo:
<div class="alert alert-danger fade <?php echo ($show) ? ''in'' : '''' ?>" role="alert">...</div>
Nota: En jQuery, addClass (''in'') para mostrar la alerta, removeClass (''in'') para ocultarla.
Dato curioso: esto funciona para todos los elementos. No solo alertas.
La eliminación de datos elimina por completo el elemento. Use el método .hide () de jQuery en su lugar.
El método de arreglarlo rápido:
Usar javascript en línea para ocultar el elemento haciendo clic de esta manera:
<div class="alert" style="display: none">
<a class="close" onclick="$(''.alert'').hide()">×</a>
<strong>Warning!</strong> Best check yo self, you''re not looking too good.
</div>
<a href="#" onclick="$(''alert'').show()">show</a>
Sin embargo, esto solo debería usarse si eres perezoso (lo cual no es bueno si quieres una aplicación que se pueda mantener).
El método de hacer las cosas bien:
Crea un nuevo atributo de datos para ocultar un elemento.
Javascript:
$(function(){
$("[data-hide]").on("click", function(){
$("." + $(this).attr("data-hide")).hide();
// -or-, see below
// $(this).closest("." + $(this).attr("data-hide")).hide();
});
});
y luego cambiar datos-descartar a ocultar-datos en el marcado. Ejemplo en jsfiddle .
$("." + $(this).attr("data-hide")).hide();
Esto ocultará todos los elementos con la clase especificada en data-hide, es decir: data-hide="alert" ocultará todos los elementos con la clase de alerta.
Xeon06 proporcionó una solución alternativa:
$(this).closest("." + $(this).attr("data-hide")).hide();
Esto solo ocultará el elemento primario más cercano. Esto es muy útil si no desea dar a cada alerta una clase única. Sin embargo, no es necesario que coloque el botón de cerrar dentro de la alerta.
Definición de .closest de jquery doc : para cada elemento del conjunto, obtenga el primer elemento que coincida con el selector comprobando el elemento y atravesando sus antecesores en el árbol DOM.)
Me encontré con este problema también y el problema con simplemente hackear el botón de cierre es que todavía necesito acceso a los eventos de cierre de alerta estándar de arranque.
Mi solución fue escribir un pequeño plugin jquery personalizable que inyecta una alerta Bootstrap 3 correctamente formada (con o sin botón de cierre cuando lo necesites) con un mínimo de alboroto y te permite regenerarlo fácilmente después de que se cierra la caja.
Consulte https://github.com/davesag/jquery-bs3Alert para conocer el uso, las pruebas y los ejemplos.
Si está utilizando una biblioteca de MVVM como knockout.js (que recomiendo encarecidamente), puede hacerlo de forma más limpia:
<div class="alert alert-info alert-dismissible" data-bind="visible:showAlert">
<button type="button" class="close" data-bind="click:function(){showAlert(false);}>
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
Warning! Better check yourself, you''re not looking too good.
</div>