2012-02-01 14 views
23

Estoy mostrando un cuadro de alerta de confirmación a través de JavaScript:cómo mostrar alerta de confirmación con tres botones 'Sí' 'No' y 'Cancelar', ya que muestra en formato MS Word

function checked() { 
if (hdnval.toLowerCase() != textbox1.toLowerCase()) { 
    var save = window.confirm('valid') 
    if (save == true) 
    { 
    return true; 
    } 
    else 
    { 
     return false; 
    } 
} 
} 

La alerta de confirmación está mostrando con dos botones: Aceptar y Cancelar.

Quiero mostrar un tercer botón en mi alerta de confirmación. Quiero que los tres botones sean así: 'Sí' 'No' 'Cancelar', como se muestra en MS Word.

+0

bastante seguro de que no tienen muchas opciones aquí. Además, ¿cómo 'No' sería diferente de 'Cancelar'? –

+1

@BrianDriscoll: El OP probablemente quiera definir una lógica personalizada para "No". Por ejemplo, el usuario hace clic en "Cerrar": el diálogo dice "¿Desea guardar su trabajo antes de partir?" Sí: guardar y cerrar, No: cerrar sin guardar, Cancelar: dejar el trabajo abierto. – StriplingWarrior

+0

@Brian Driscoll: StriplingWarrior tiene razón, Sí significa Guardar, No significa que no guarde e ir a otra pestaña, cancelar significa no guardar, pero permanecer en la misma página – Rocky

Respuesta

37

Esto no se puede hacer con el cuadro de diálogo de JavaScript nativo, pero muchas bibliotecas de JavaScript incluyen cuadros de diálogo más flexibles. Puede usar algo como jQuery UI's dialog box para esto.

Véase también estas preguntas muy similares:

He aquí un ejemplo, como se demuestra en this jsFiddle:

<html><head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> 
    <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css"> 
</head> 
<body> 
    <a class="checked" href="http://www.google.com">Click here</a> 
    <script type="text/javascript"> 

     $(function() { 
      $('.checked').click(function(e) { 
       e.preventDefault(); 
       var dialog = $('<p>Are you sure?</p>').dialog({ 
        buttons: { 
         "Yes": function() {alert('you chose yes');}, 
         "No": function() {alert('you chose no');}, 
         "Cancel": function() { 
          alert('you chose cancel'); 
          dialog.dialog('close'); 
         } 
        } 
       }); 
      }); 
     }); 

    </script> 
</body><html> 
+0

I no tiene conocimiento en jquery, por favor, dame un poco más de demostración. mostrar que podría usar jquery y podría reemplazar mi código. Por favor, – Rocky

+0

@Rocky: si encuentro tiempo, puedo proporcionar un ejemplo de código, pero la documentación para jQuery y el cuadro de diálogo de la interfaz de usuario jQuery son bastante claras. Mira el código fuente de la página de demostración a la que me he vinculado. Usa Google para encontrar tutoriales. Me gusta ayudar cuando el trabajo de unos minutos por mi parte le ahorrará horas de esfuerzo, pero no voy a hacer todo el trabajo por usted. – StriplingWarrior

+0

@ StriplingWarrior: proporcionar un poco de ayuda y un código de muestra sería suficiente para mí, descansar todo lo que pueda hacer si tengo alguna idea, y muchas gracias por su respuesta y ans. – Rocky

16

Si no desea usar una libra JS por separado ria para crear un control personalizado para eso, se pueden utilizar dos confirm diálogos para hacer las comprobaciones:

if (confirm("Are you sure you want to quit?")) { 
    if (confirm("Save your work before leaving?")) { 
     // code here for save then leave (Yes) 
    } else { 
     //code here for no save but leave (No) 
    } 
} else { 
    //code here for don't leave (Cancel) 
} 
+2

Quiero mostrar los tres botones a la vez – Rocky

Cuestiones relacionadas