La ventana emergente modal presenta texto y opciones de confirmación a los usuarios de Internet.
Insertar el jQuery y guiones ventana modal. En este ejemplo se utiliza la ventana de confirmación modal de la interfaz de usuario jQuery plug-in. La ventana modal ejemplo combinada con cupertino tema de jQuery UI. Todo el código está disponible en la API de Google Developer:
enlace href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel tipo "stylesheet" = = "text / css" /
script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" / script
script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" / script
Escriba el código de jQuery. He aquí un ejemplo del código de demostración estándar para la aplicación de la ventana de confirmación modal jQuery UI:
guión
$ (Function () {
$ ("# Cuadro de diálogo de confirmación"). Diálogo ({
tamaño variable: false,
altura: 140,
modal: true,
botones: {
"Eliminar todos los elementos": function () {
. $ (This) diálogo ("close");
},
Cancelar: function () {
. $ (This) diálogo ("close");
}
}
});
});
/ Script
Escribe el código HTML. El cuadro de diálogo de confirmación div coincide con el código de demostración utilizado por la aplicación de diálogo de confirmación modal jQuery UI:
cuerpo
pA montón de fondo de texto va aquí / p
div id = título de "cuadro de diálogo de confirmación" = "Vaciar la papelera de reciclaje?"
pspan class = estilo "ui ui-icon-icon-alerta" = "float: left; margin: 0 7px 20px 0;" / artículos spanThese se eliminarán permanentemente y no se pueden recuperar. ¿Está seguro? / P
/ Div
/ Cuerpo
Editar el código jQuery para ocultar el exceso de contenido. Cuando se activa el cuadro de diálogo que debe utilizar el jQuery. Css () para cambiar la propiedad de desbordamiento del elemento de cuerpo oculto. Esto oculta el exceso de contenido en segundo plano cada vez que aparezca la ventana modal. Es importante utilizar el método. Css () para restaurar la propiedad de desbordamiento del elemento de cuerpo para desplazarse una vez que la ventana modal está cerrado por el usuario. En este ejemplo se expande el código jQuery para ocultar el desbordamiento de la activación y posteriormente restaurar la barra de desplazamiento cuando el usuario hace clic en un botón y se cierra la ventana:
guión
$ (Function () {
$ ("# Cuadro de diálogo de confirmación"). Diálogo ({
tamaño variable: false,
altura: 140,
modal: true,
botones: {
"Eliminar todos los elementos": function () {
$ ("Cuerpo") css ('overflow', 'scroll').;
. $ (This) diálogo ("close");
},
Cancelar: function () {
$ ("Cuerpo") css ('overflow', 'scroll').;
. $ (This) diálogo ("close");
}
}
});
$ ("Cuerpo") css ('overflow', 'oculto').;
});
/ Script
Consejos y advertencias
Una vez colocado dentro de las etiquetas adecuadas, el ejemplo completo del código de ejemplo aparece como sigue:
! DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
HTML xmlns = "http://www.w3.org/1999/xhtml"
cabeza
meta http-equiv = contenido "Content-Type" = "text / html; charset = UTF-8" /
Ejemplo / title diálogo titleModal
enlace href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel tipo "stylesheet" = = "text / css" /
script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" / script
script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" / script
guión
$ (Function () {
$ ("# Cuadro de diálogo de confirmación"). Diálogo ({
tamaño variable: false,
altura: 140,
modal: true,
botones: {
"Eliminar todos los elementos": function () {
. $ (This) diálogo ("close");
},
Cancelar: function () {
$ ("Cuerpo") css ('overflow', 'scroll').;
. $ (This) diálogo ("close");
}
}
});
$ ("Cuerpo") css ('overflow', 'oculto').;
});
/ Script
/ Head
cuerpo
parcelas de texto aquí. / P
div id = título de "cuadro de diálogo de confirmación" = "Vaciar la papelera de reciclaje?"
pspan class = estilo "ui ui-icon-icon-alerta" = "float: left; margin: 0 7px 20px 0;" / artículos spanThese se eliminarán permanentemente y no se pueden recuperar. ¿Está seguro? / P
/ Div
/ Cuerpo
/ Html
Algunas versiones antiguas de los navegadores Internet Explorer pueden requerir el atributo de altura del elemento de cuerpo para ser fijado antes de la creación de un entorno de desbordamiento. Si el cumplimiento con versiones anteriores de los navegadores más antiguos es importante, es posible que desee considerar la posibilidad de envolver todo el contenido del cuerpo dentro de un div y utilizando el método. Css () para cambiar las propiedades de desbordamiento de este div cuando aparezca el modal.
NO FUNCIONA!
ResponderEliminar