Simple Jquery Dialog pero ahora en click

Question

Intenté hacer un diálogo usando jquery, funciona, pero no tengo éxito en hacerlo en un clic, ya que no solo debería aparecer una ventana emergente, sino solo cuando haces clic en él.

<script type="text/javascript"> 
$.ui.dialog.defaults.bgiframe = true;
$(function() {
    $("#dialog").dialog();
});
</script>  

y

<div id="dialog" title="Basic dialog">
    <p>hi how are you</p>
</div>

y para el botón de aspecto agradable

<button id="create-user" class="ui-button ui-state-default ui-corner-all">Profiel Matthijs</button>

Intenté usar estos ejemplos

http://jqueryui.com/demos/dialog/
http://jqueryui.com/demos/dialog/#modal-form

cualquier persona sabe cómo hacer que esto funcione con un clic en el botón # crear-usuario No soy tan bueno en javascript.

Gracias Matthy

Answer 1

Debes configurar la opción autoOpen en falso para que el cuadro de diálogo no se abra cuando se crea.

Para abrirlo cuando se hace clic en el botón, deberías llamar al método abierto.

<script type="text/javascript"> 
    $.ui.dialog.defaults.bgiframe = true;
    $(function() {
        $('#dialog').dialog({
            autoOpen: false
        });
        $('#create-user').click(function() {
            $('#dialog').dialog('open');
        });
    });
</script>