¿Cómo escribo mi propio cuadro de diálogo de confirmación en JavaScript?

Question

Quiero escribir algo que actúe como confirmar () en javascript, pero quiero escribirlo yo mismo para poder aplicar el cuadro de diálogo. Al tener problemas para pensar cómo forzaría básicamente el hilo de javascript para esperar hasta que el usuario responda y luego devuelva verdadero o falso.

Answer 1

Si fuera usted, miraría una de las bibliotecas populares de JavaScript. La mayoría contiene algún tipo de diálogo modal.

Una pareja que encontré para JQuery son jqModal y SimpleModal .

Cuando cree el cuadro de diálogo modal, deberá vincular los eventos a los botones, por lo que debería hacer algo como:

function askUserYesOrNo() {
  var myDialog = $('<div class="mydialog"><p>Yes or No?</p><input type="button" id="yes" value="Yes"/><input type="button" id="no" value="No"/></div>');
  $("#yes").click(handleYes);
  $("#no").click(handleNo);
  myDialog.modal(); //This would have to be replaced by whatever syntax the modal framework uses
}

function handleYes() {
  //handle yes...
}

function handleNo() {
  //handle no...
}

Answer 2

Realmente desea utilizar un marco para esto, debido a la cantidad de problemas extraños entre navegadores que encontrará al intentar construirlo usted mismo.

He tenido buenos resultados usando jqModal , un complemento para el marco jQuery que le permite definir diálogos modales, pero de ninguna manera es la única opción; intente buscar en Google jquery modal o yui modal para algunas alternativas.

Answer 3

Para Mootools, hay moo.rd's Custom.Confirm y Windoo.Confirm para su referencia.

Answer 4

Puede usar la ventana. showModalDialog ( mozilla ), pero es una función no estándar introducida por Internet Explorer. Ahora también es compatible con Firefox 3 y Safari (no estoy seguro de qué versión, pero al menos 3.1 y superior, pero no el iPhone).

Answer 5

Una caja de luz modal YUI básica ( ejemplo ):

http://bravo9.com/journal/a-simple-lightbox-modal-dialog-with-yui-c5b048f5-b278-46d1-9a7e-0d3035094f52/