jQuery UI Dialog not showing correctly

Question

I'm using jQuery UI 1.8.19 and Twitter Bootstrap 2.0.3 in a site I'm developing. I want to show a modal dialog when click in a Delete and for this I do that:

 <div id="dialog-confirm" title="<?php echo lang("event:delete_confirm_title") ?>">
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><?php echo lang('event:delete_confirm_content') ?></p>
 </div>

And the JS to fire the event is this one:

 $(function() {
    $("#delete").click(function(){
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "<?php echo lang('event:delete') ?>": function() {
                    $( this ).dialog( "close" );
                },
                "<?php echo lang('global:cancel_label') ?>": function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });
});

For some reason the modal dialog is always showed at the end of the page when it shouldn't be I think and when I click the element the dialog appears but the page is redirected instantaneously to my home page and didn't know the cause because I don't have redirects in any place and also there are no forms there. Any advice or help on this? Best regards

Answer 1

You should add style='display: none' to your dialog div so it won't be displayed at startup.

Then if the page is sent to home when you click the button, you may want to check what type of button #delete is and finish it's function with return false if it's a Submit for example to avoid normal click event handler to be launched :

$(function() {
    $("#delete").click(function(e){
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "<?php echo lang('event:delete') ?>": function() {
                    $( this ).dialog( "close" );
                },
                "<?php echo lang('global:cancel_label') ?>": function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    e.preventDefault();
    });
});

Edit : Modification done according to Scott suggestion

Answer 2

This happened to me as well. There is only one cause I know of. The dialog CSS file is not being loaded.

See my SO Question: position:fixed breaks in IE9