Latest web development tutorials

Bootstrap cuadro de alerta

Cuadro de mensaje de advertencia (Alerta) se utiliza sobre todo para mostrar información como usuarios finales desean una advertencia o mensaje de confirmación. Caja con una advertencia (Alerta) plug-in, se puede añadir cancelar (despedir) función para todo el cuadro de mensaje de advertencia.

uso

Hay dos maneras en que puede permitir a un cuadro de advertencia para cancelar la función (despido):

  • A través de atributo de datos: mediante la adición de los datos API (API de datos) para cancelar la función, sólo tiene que añadir un botón para apagar datos desestimarfuncionalidad= "alerta",se añadirá automáticamente al apagar el cuadro de advertencia.
    <a class="close" data-dismiss="alert" href="#" aria-hidden="true">
    	Y épocas;
    </a>
    
  • Por JavaScript: adición de cancelar la funcionalidad a través de JavaScript:
    $ ( ". Alerta"). Alerta ()
    

Ejemplos

El siguiente ejemplo demuestra el uso de un widget cuadro de advertencia (Alerta) por los datos de atributo de uso.

Ejemplos

<Div class = "alerta alerta alerta" > <A href = "#" class = "cerrar" datos desestimar = "alert"> y tiempos; </ A> <Strong> Atención! </ Strong> el problema de conexión de red. </ Div>

Trate »

Los resultados son los siguientes:

advertencia de la caja de widgets (Alerta)

opciones

No hay opciones.

camino

Éstos son algunos cuadro de advertencia (Alerta) plug-in de maneras útiles:

方法描述实例
.alert()该方法让所有的警告框都带有关闭功能。
$('#identifier').alert();
Close Method.alert('close')关闭所有的警告框。
$('#identifier').alert('close');
Para habilitar la animación cuando está cerrado, asegúrese de agregar laclase y .fade.in.

Ejemplos

El siguiente ejemplo demuestra.alert método ():

Ejemplos

<H3> cuadro de advertencia (Alerta) alerta de widgets () método </ h3> <Div id = "Myalert" class = "alerta alerta-éxito" > <A href = "#" class = "cerrar" datos desestimar = "alert"> y los tiempos; </ a> <Strong> Éxito! </ Strong> el resultado es exitoso. </ Div> <Div id = "Myalert" class = "alerta alerta alerta" > <A href = "#" class = "cerrar" datos desestimar = "alert"> y los tiempos; </ a> <Strong> Atención! </ Strong> el problema de conexión de red. </ Div> <Script>
$ (Function () {$ ( ".close") click (function () {$ ( "#myAlert") alerta (); ..});});
</ Script> [/ mycode2] </ div> <br> <A target = "_blank" href = "/try/try.php?filename=bootstrap3-plugin-alert-method1" class = "tryitbtn"> tratar »</ a> </ Div> <P> El siguiente ejemplo demuestra el <b> .alert ( "cerca" ) de uso </ b> Método: </ p> <Div class = "ejemplo"> <H2 class = "ejemplo"> ejemplo </ h2> <Div class = "example_code"> [mycode3 type = "html"] <h3> método de la caja de advertencia (Alerta) alerta de widgets ( "cerca") </ h3> <Div id = "Myalert" class = "alerta alerta-éxito" > <A href = "#" class = "cerrar" datos desestimar = "alert"> y los tiempos; </ a> <Strong> Éxito! </ Strong> el resultado es exitoso. </ Div> <Div id = "Myalert" class = "alerta alerta alerta" > <A href = "#" class = "cerrar" datos desestimar = "alert"> y los tiempos; </ a> <Strong> Atención! </ Strong> el problema de conexión de red. </ Div> <Script>
$ (Function () {$ ( ".close") click (function () {$ ( "#myAlert") alert ( 'cerca'); ..});});
</ Script>

Trate »

Usted puede ver todo el cuadro de advertencia se aplica apagado automático apaga cualquier cuadro de advertencia, el otro cuadro de alerta restante estará cerrada.

evento

La siguiente tabla muestra el cuadro de advertencia (Alerta) plug-ins que se utilizarán en el evento. Estos eventos se pueden utilizar cuando la función de enlace.

事件描述实例
close.bs.alert当调用close实例方法时立即触发该事件。
$('#myalert').bind('close.bs.alert', function () {
  // 执行一些动作...
})
closed.bs.alert当警告框被关闭时触发该事件(将等待 CSS 过渡效果完成)。
$('#myalert').bind('closed.bs.alert', function () {
	// 执行一些动作...
})

Ejemplos

El siguiente ejemplo demuestra caja de eventos de advertencia (Alerta) plug-in:

Ejemplos

<Div id = "Myalert" class = "alerta alerta-éxito" > <A href = "#" class = "cerrar" datos desestimar = "alert"> y los tiempos; </ a> <Strong> Éxito! </ Strong> el resultado es exitoso. </ Div> <Script>
$ (Function () {$ ( "#myAlert"). Bind ( 'closed.bs.alert', function () { alert ( "cuadro de mensaje de advertencia está cerrado.");});});
</ Script>

Trate »

Los resultados son los siguientes:

Cuadro de advertencia (Alerta) Plug-in de eventos