Diálogo de Jquery simple pero ahora al hacer clic

Question

Intenté hacer un diálogo usando jquery, pero no tengo éxito en hacerlo, porque no solo debería aparecer, sino solo al hacer 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> 

intentado usar estos ejemplos

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

Alguien sabe cómo hacerlo funcionar haciendo clic en el botón # create-user No soy tan bueno en javascript.

Gracias Matthy

Answer 1

Es necesario que ajuste la opción autoOpen en false para que el diálogo no se abre cuando su creación.

Para abrirlo cuando se hace clic en el botón, debe 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>