¿Cómo puedo hacer que un cuadro de diálogo desde jQuery se muestre solo después de presionar un botón?

Question

Este código es de la demostración de confirmación modal en el sitio jQuery.

<script type="text/javascript">
$(function() {
    $("#dialog").dialog({
        bgiframe: true,
        resizable: false,
        height:140,
        modal: true,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.5
        },
        buttons: {
            'Yes': function() {
                $(this).dialog('close');
            },
            'No': function() {
                $(this).dialog('close');
            }
        }
    });
});
</script>



<div class="demo">

<div id="dialog" title="Empty the recycle bin?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
    <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
    <form>
        <input value="text input" /><br />
        <input type="checkbox" />checkbox<br />
        <input type="radio" />radio<br />
        <select>
            <option>select</option>
        </select><br /><br />
        <textarea>textarea</textarea><br />
    </form>
</div><!-- End sample page content -->

</div><!-- End demo -->

<div class="demo-description">

<p>Confirm an action that may be destructive or important.  Set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>

</div><!-- End demo-description -->

¿Alguien puede decirme cómo hacer este programa solo después de presionar un botón? En este momento, se muestra automáticamente en la página justo después de la carga.

Answer 1

Bien o mal, aquí hay un ejemplo de un cuadro de diálogo de estilo de alerta genérico que uso:

Configure el diálogo (en documento listo):

$("#generic-dialog").dialog({
    autoOpen: false,
    buttons: {
        Ok: function() {
            $(this).dialog("close");
        }
    }
});

Y abra el cuadro de diálogo (después de algún evento):

$("#generic-dialog")
   .text("Status updated successfully.")
   .dialog("option", "title", "Your Status").dialog("open");

Answer 2

Agregue el botón a la página y agregue el código al evento de clic del botón.

<script type="text/javascript">
$(function() {
    $("#button").click(function(){
    $("#dialog").dialog({
            bgiframe: true,
            resizable: false,
            height:140,
            modal: true,
            overlay: {
                    backgroundColor: '#000',
                    opacity: 0.5
            },
            buttons: {
                    'Yes': function() {
                            $(this).dialog('close');
                    },
                    'No': function() {
                            $(this).dialog('close');
                    }
            }
      });
   });
  });
</script>

y en HTML

<input type='button' value="click" id="button"/>

Answer 3

$("#btnTest").click(function() {
       $('#dialog').dialog('open');
        return false;
    })

Eso debería abrir el cuadro de diálogo que ha definido: adjunta la función de abrir cuadro de diálogo para hacer clic en el evento del botón

Ah, y establezca autoOpen: false en las propiedades de configuración del cuadro de diálogo :)