How do I remove the close button (the **X** in the top-right corner) on a dialog box created by jQuery UI?

How to remove close button on the jQuery UI dialog?

I&#39;m using a custom jQuery 1.10.3 theme. I downloaded every straight from the theme roller and I have intentionally not changed anything.

I created a dialog box and I get an empty gray square where the close icon should be:
![Screen shot of missing close icon][img1]

I compared the code that is generated on my page:
&lt;!-- language: html --&gt;
    &lt;div class=&quot;ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix&quot;&gt;
        &lt;spanid=&quot;ui-id-2&quot; class=&quot;ui-dialog-title&quot;&gt;Title&lt;/span&gt;
        &lt;button class=&quot;ui-dialog-titlebar-close&quot;&gt;&lt;/button&gt;
    &lt;/div&gt;

To the code generated on the [Dialog Demo page][dialogDemo]:
&lt;!-- language: html --&gt;
    &lt;div class=&quot;ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix&quot;&gt;
        &lt;span id=&quot;ui-id-1&quot; class=&quot;ui-dialog-title&quot;&gt;Basic dialog&lt;/span&gt;
        &lt;button class=&quot;ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close&quot; role=&quot;button&quot; aria-disabled=&quot;false&quot; title=&quot;close&quot;&gt;
            &lt;span class=&quot;ui-button-icon-primary ui-icon ui-icon-closethick&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;ui-button-text&quot;&gt;close&lt;/span&gt;
        &lt;/button&gt;
    &lt;/div&gt;

### EDIT
The different parts of the code are **generated** by jQueryUI, not me so I can&#39;t just add the span tags without editing the jqueryui js file which seems like a bad/unnecessary choice to achieve normal functionality.

Here is the JavaScript used that generates that part of the code:
&lt;!-- language: js --&gt;
    this.element.dialog({
        appendTo: &quot;#summary_container&quot;,
        title: this.title(),
        closeText: &quot;Close&quot;,
        width: this.width,
        position: {
            my: &quot;center top&quot;,
            at: (&quot;center top+&quot;+(window.innerHeight*.1)),
            collision: &quot;none&quot;
        },
        modal: false,
        resizable: false,
        draggable: false,
        show: &quot;fold&quot;,
        hide: &quot;fold&quot;,
        close: function(){
            if(KOVM.areaSummary.isVisible()){
                KOVM.areaSummary.isVisible(false);
            }
        }
    });

I&#39;m at a loss and need help.

  [img1]: http://i.stack.imgur.com/PjMs8.png
  [dialogDemo]: http://jqueryui.com/dialog/#default

jQuery UI Dialog - missing close icon

I am using the [`jquery-ui-dialog`][1] plugin

I am looking for way to refresh the page when in some circumstances when the dialog is closed.

Is there a way to capture a close event from the dialog?

I know I can run code when the close button is clicked but that doesn&#39;t cover the user closing with escape or the x in the top right corner.


  [1]: https://jqueryui.com/dialog/

jquery-ui-dialog - How to hook into dialog close event

How do I go about disabling a button [on the jQuery UI dialog][1]. I can&#39;t seem to find this in any of the documentation in the link above.

I have 2 buttons on the modal confirmation (&quot;Confirm&quot; and &quot;Cancel&quot;). In certain cases, I want to disable the &quot;Confirm&quot; button.

  [1]: http://jqueryui.com/demos/dialog/#modal-confirmation


How can I disable a button on a jQuery UI dialog?

I&#39;m having a lot of trouble finding specific information and examples on this.   I&#39;ve got a number of jQuery UI dialogs in my application attached to divs that are loaded with .ajax() calls.  They all use the same setup call:

     $(&quot;.mydialog&quot;).dialog({
            autoOpen: false,
            resizable: false,
            modal: true
     });

I just want to have the dialog resize to the width of the content that gets loaded.  Right now, the width just stays at 300px (the default) and I get a horizontal scrollbar.

As far as I can tell, &quot;autoResize&quot; is no longer an option for dialogs, and nothing happens when I specify it.

I&#39;m trying to not write a separate function for each dialog, so `.dialog(&quot;option&quot;, &quot;width&quot;, &quot;500&quot;)` is not really an option, as each dialog is going to have a different width.  

Specifying `width: &#39;auto&#39;` for the dialog options just makes the dialogs take up 100% of the width of the browser window.

What are my options?  I&#39;m using jQuery 1.4.1 with jQuery UI 1.8rc1. It seems like this should be something that is really easy.

EDIT: I&#39;ve implemented a kludgy workaround for this, but I&#39;m still looking for a better solution.


Automatically resize jQuery UI dialog to the width of the content loaded by ajax

When an ajax operation fails, I create a new div with the errors and then show it as a dialog. When the dialog is closed I would like to completely destroy and remove the div again. How can I do this? My code looks something like this at the moment:

    $(&#39;&lt;div&gt;We failed&lt;/div&gt;&#39;)
        .dialog(
        {
            title: &#39;Error&#39;,
            close: function(event, ui)
            {
                $(this).destroy().remove();
            }
        });

When I run this the dialog box shows up correctly, but when I close it the dialog is still visible in the html (using FireBug). What am I missing here? Something I have forgotten?

**Update:** Just noticed my code gives me an error in the firebug console.

&gt;$(this).destroy is not a function

Anyone able to help me out?

**Update:** If I do just `$(this).remove()` instead, the item is removed from the html. But is it completely removed from the DOM? Or do I somehow need to call that destroy function first as well?

How to completely remove a dialog on close

I have a JQuery UI dialog popup that displays a form.  By selecting certain options on the form new options will appear in the form causing it to grow taller.  This can lead to a scenario where the main page has a scrollbar and the JQuery UI dialog has a scrollbar.  This two-scrollbar scenario is unsightly and confusing for the user.

How can I make the JQuery UI dialog grow (and possibly shrink) to always fit its contents without showing a scrollbar?  I would prefer that only a scrollbar on the main page is visible.

Make JQuery UI Dialog automatically grow or shrink to fit its contents

I have a jQuery UI Dialog that gets displayed when specific elements are clicked.  I would like to close the dialog if a click occurs anywhere other than on those triggering elements or the dialog itself.

Here&#39;s the code for opening the dialog:

	$(document).ready(function() {
		var $field_hint = $(&#39;&lt;div&gt;&lt;/div&gt;&#39;)
			.dialog({
				autoOpen: false,
				minHeight: 50,
				resizable: false,
				width: 375
			});
	
		$(&#39;.hint&#39;).click(function() {
			var $hint = $(this);
			$field_hint.html($hint.html());
			$field_hint.dialog(&#39;option&#39;, &#39;position&#39;, [162, $hint.offset().top + 25]);
			$field_hint.dialog(&#39;option&#39;, &#39;title&#39;, $hint.siblings(&#39;label&#39;).html());
			$field_hint.dialog(&#39;open&#39;);
		});
		/*$(document).click(function() {
			$field_hint.dialog(&#39;close&#39;);
		});*/
	});

If I uncomment the last part, the dialog never opens. I assume it&#39;s because the same click that opens the dialog is closing it again.

----------

**Final Working Code**  
*Note: This is using the [jQuery outside events][1] plugin*

	$(document).ready(function() {
		// dialog element to .hint
		var $field_hint = $(&#39;&lt;div&gt;&lt;/div&gt;&#39;)
				.dialog({
					autoOpen: false,
					minHeight: 0,
					resizable: false,
					width: 376
				})
				.bind(&#39;clickoutside&#39;, function(e) {
					$target = $(e.target);
					if (!$target.filter(&#39;.hint&#39;).length
							&amp;&amp; !$target.filter(&#39;.hintclickicon&#39;).length) {
						$field_hint.dialog(&#39;close&#39;);
					}
				});

		// attach dialog element to .hint elements
		$(&#39;.hint&#39;).click(function() {
			var $hint = $(this);
			$field_hint.html(&#39;&lt;div style=&quot;max-height: 300px;&quot;&gt;&#39; + $hint.html() + &#39;&lt;/div&gt;&#39;);
			$field_hint.dialog(&#39;option&#39;, &#39;position&#39;, [$hint.offset().left - 384, $hint.offset().top + 24 - $(document).scrollTop()]);
			$field_hint.dialog(&#39;option&#39;, &#39;title&#39;, $hint.siblings(&#39;label&#39;).html());
			$field_hint.dialog(&#39;open&#39;);
		});

		// trigger .hint dialog with an anchor tag referencing the form element
		$(&#39;.hintclickicon&#39;).click(function(e) {
			e.preventDefault();
			$($(this).get(0).hash + &#39; .hint&#39;).trigger(&#39;click&#39;);
		});
	});


  [1]: http://benalman.com/projects/jquery-outside-events-plugin/ &quot;jQuery outside events&quot;

jQuery UI - Close Dialog When Clicked Outside

I have an app on jquery 1.5 with dialogs worked fine.
While I have a lot of .live handlers, I changed this to .on.
For that, I have to update jquery (now 1.8.3 an jquerui 1.9.1).

Now, I got: `Error: cannot call methods on dialog prior to initialization; attempted to call method &#39;close&#39;`

Following is the code:

Javascript

    var opt = {
            autoOpen: false,
            modal: true,
            width: 550,
	        height:650,
	        title: &#39;Details&#39;
    };

    $(document).ready(function() {
	$(&quot;#divDialog&quot;).dialog(opt);
        $(&quot;#divDialog&quot;).dialog(&quot;open&quot;);
    ...    

html code

    &lt;div id=&quot;divDialog&quot;&gt;
  	&lt;div id=&quot;divInDialog&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;


Any idea why this might be happening?

jquery ui Dialog: cannot call methods on dialog prior to initialization

I am using a jQuery UI dialog. If it is open, I want to do one thing. If it is closed, I want to do another. 

My question is, how do I detect if a jQuery UI dialog box is open or not?


Detect if a jQuery UI dialog box is open

I&#39;m developing an `ASP.Net MVC` site and on it I list some bookings from a database query in a table with an `ActionLink` to cancel the booking on a specific row with a certain `BookingId` like this:   


**My bookings**

    &lt;table cellspacing=&quot;3&quot;&gt;
        &lt;thead&gt;
            &lt;tr style=&quot;font-weight: bold;&quot;&gt;
                &lt;td&gt;Date&lt;/td&gt;
                &lt;td&gt;Time&lt;/td&gt;
                &lt;td&gt;Seats&lt;/td&gt;      
                &lt;td&gt;&lt;/td&gt;              
                &lt;td&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;            
        &lt;tr&gt;
            &lt;td style=&quot;width: 120px;&quot;&gt;2008-12-27&lt;/td&gt;
            &lt;td style=&quot;width: 120px;&quot;&gt;13:00 - 14:00&lt;/td&gt;
            &lt;td style=&quot;width: 100px;&quot;&gt;2&lt;/td&gt;
            &lt;td style=&quot;width: 60px;&quot;&gt;&lt;a href=&quot;/Booking.aspx/Cancel/15&quot;&gt;cancel&lt;/a&gt;&lt;/td&gt;
            &lt;td style=&quot;width: 80px;&quot;&gt;&lt;a href=&quot;/Booking.aspx/Change/15&quot;&gt;change&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;            
        &lt;tr&gt;
            &lt;td style=&quot;width: 120px;&quot;&gt;2008-12-27&lt;/td&gt;
            &lt;td style=&quot;width: 120px;&quot;&gt;15:00 - 16:00&lt;/td&gt;
            &lt;td style=&quot;width: 100px;&quot;&gt;3&lt;/td&gt;
            &lt;td style=&quot;width: 60px;&quot;&gt;&lt;a href=&quot;/Booking.aspx/Cancel/10&quot;&gt;cancel&lt;/a&gt;&lt;/td&gt;
            &lt;td style=&quot;width: 80px;&quot;&gt;&lt;a href=&quot;/Booking.aspx/Change/10&quot;&gt;change&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;  
    &lt;/table&gt;

What would be nice is if I could use the `jQuery Dialog` to popup a message asking if the user is sure he wants to cancel the booking. I have been trying get this to work but I keep getting stuck on how to create a jQuery function that accepts parameters so that I can replace the 

`&lt;a href=&quot;/Booking.aspx/Cancel/10&quot;&gt;cancel&lt;/a&gt;` 

with 

`&lt;a href=&quot;#&quot; onclick=&quot;ShowDialog(10)&quot;&gt;cancel&lt;/a&gt;`. 

The `ShowDialog` function would then open the dialog and also pass the paramter 10 to the dialog so that if the user clicks yes then It will post the href: `/Booking.aspx/Change/10`

I have created the jQuery Dialog in a script like this:

    $(function() {
        $(&quot;#dialog&quot;).dialog({
            autoOpen: false,
            buttons: {
                &quot;Yes&quot;: function() {
                    alert(&quot;a Post to :/Booking.aspx/Cancel/10 would be so nice here instead of the alert&quot;);},
                &quot;No&quot;: function() {$(this).dialog(&quot;close&quot;);}
            },
            modal: true,
            overlay: {
                opacity: 0.5,
                background: &quot;black&quot;
            }
        });
    });   

and the dialog itself:

       &lt;div id=&quot;dialog&quot; title=&quot;Cancel booking&quot;&gt;Are you sure you want to cancel your booking?&lt;/div&gt;

So finally to my question: How can I accomplish this? or is there a better way of doing it?




Passing data to a jQuery UI Dialog

I have a problem with the [`jquery-ui dialog box`][1]. 

**The problem is that when I close the dialog box and then I click on the link that triggers it, it does not pop-up again unless I refresh the page.** 

How can I call the dialog box back without refreshing the actual page. 

Below is my code:

    $(document).ready(function() {
        $(&#39;#showTerms&#39;).click(function()
        {
            $(&#39;#terms&#39;).css(&#39;display&#39;,&#39;inline&#39;);
            $(&#39;#terms&#39;).dialog({
                resizable: false,
                modal: true,
                width: 400,
                height: 450,
                overlay: { backgroundColor: &quot;#000&quot;, opacity: 0.5 },
                buttons:{ &quot;Close&quot;: function() { $(this).dialog(&quot;close&quot;); } },
                close: function(ev, ui) { $(this).remove(); },
        }); 
    });

Thanks


  [1]: https://jqueryui.com/dialog/

jQuery UI Dialog Box - does not open after being closed

&gt; **Possible Duplicate:**  
&gt; https://stackoverflow.com/questions/2171763/jquery-ui-dialog-change-title-after-load-callback  

&lt;!-- End of automatically inserted text --&gt;

I like to change the title from an UI Dialog after I have submitted a form in this UI Dialog. So in the callback-function after `load` I should suggest, but I&#39;ve tried and googled without result.


How to update &#39;title in jQuery UI Dialog?

How to close jQuery Dialog within the dialog without using the close button?

Inside the Dialog is a simple form request. If a successful submission occurs, then the UI dialog automatically closes and refreshes the parent page:

	&lt;script type=&quot;text/javascript&quot;&gt;
		$(document).ready(function () {
			$(&quot;#form-dialog&quot;).dialog({
				autoOpen: true,
				modal: true,
				width: 200,
				draggable: true,
				resizable: true
			});
		});
	&lt;/script&gt;

	&lt;div id=&quot;form-dialog&quot; title=&quot;Form Submit&quot;&gt;
		&lt;form action=&quot;default.aspx&quot; method=&quot;post&quot;&gt;
			&lt;input type=&quot;text&quot; name=&quot;name&quot; value=&quot; &quot; /&gt;    
			&lt;input type=&quot;submit&quot; value=&quot;submit&quot; /&gt;

			&lt;a href=&quot;#&quot; id=&quot;btnDone&quot;&gt;CLOSE&lt;/a&gt;

			&lt;script type=&quot;text/javascript&quot;&gt;
			$(document).ready(function () {
				$(&quot;#btnDone&quot;).click(function () {
					$(this).dialog(&#39;close&#39;);
				});
			});
			&lt;/script&gt;
		&lt;/form&gt;
	&lt;/div&gt;




How to close jQuery Dialog within the dialog?

I have a small problem.  I&#39;m attempting to catch the OnUnLoad Event of the Window and ask a confirmation question and if the user decides they want to stay then fine, and if they want to leave the page then they&#39;ll lose all unsaved data.  Here&#39;s the issues...

I&#39;m using a jQuery UI Dialog and when I put the following code on my page, I have the Dialog open, and when I click the back button on the browser, it never pops up the msgbox.  It just refreshes the page:

    &lt;script type=&quot;text/javascript&quot;&gt; 
        $(window).bind(&#39;beforeunload&#39;, function() { 
                alert(&#39;you are an idiot!&#39;); 
            } 
        );
    &lt;/script&gt;


And the solution that I&#39;m using was a post [here][1].  Again, the msgbox will display fine if I do not have the jQuery UI Dialog open.  If I do, then it doesn&#39;t display the msgbox and just refreshes the page.

Any ideas?


  [1]: https://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own

jQuery UI Dialog OnBeforeUnload

I am having an issue getting a dialog to work as basic functionality. Here is my jQuery source imports:

    &lt;script type=&quot;text/javascript&quot; src=&quot;scripts/jquery-1.9.1.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;scripts/jquery-ui-1.11.1.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;scripts/json.debug.js&quot;&gt;&lt;/script&gt;

Html:

    &lt;button id=&quot;opener&quot;&gt;open the dialog&lt;/button&gt;
    &lt;div id=&quot;dialog1&quot; title=&quot;Dialog Title&quot; hidden=&quot;hidden&quot;&gt;I&#39;m a dialog&lt;/div&gt;
    
    &lt;script type=&quot;text/javascript&quot;&gt;
    	$(&quot;#opener&quot;).click(function() {
    		    $(&quot;#dialog1&quot;).dialog(&#39;open&#39;);
    	});
    &lt;/script&gt;

From the posts around seems like as a library import issue. I downloaded the JQuery UI Core, Widget, Mouse and Position dependencies.

Any Ideas?

Error: TypeError: $(...).dialog is not a function

Can anyone tell me how can i use a variable for button text in jQuery UI dialog?
I want to make a dynamic button name.

jQuery UI dialog button text as a variable

I&#39;d like to use `instance` method for testing if jQuery UI Dialog widget has been initialized or not. Regarding to [API](http://api.jqueryui.com/dialog/#method-instance), this is possible, but it doesn&#39;t work for me:

`Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method &#39;instance&#39;`

demo: http://jsfiddle.net/mDbV7/

**UPDATE:**

This was a mistake in the documentation, `instance` method will be available from version 1.11.0, see [this issue](https://github.com/jquery/api.jqueryui.com/issues/117).



jQuery UI dialog - check if exists by instance method

I found this answer on another thread..

https://stackoverflow.com/questions/2512463/how-to-add-multiple-buttons-in-jquery-ui-dialog-box

Using this syntax, how do you add class to a particular button?

     $(&quot;#mydialog&quot;).dialog({
          buttons: {
            &#39;Confirm&#39;: function() {
               //do something
               $(this).dialog(&#39;close&#39;);
            },
            &#39;Cancel&#39;: function() {
               $(this).dialog(&#39;close&#39;);
            }
          }
        });



jQuery Ui Dialog Buttons, How to add class?

I have a dialog, and I have a datepicker field on the dialog.

When I open the dialog and click in the datepicker field, the datepicker panel show behind dialog.

I try more properties: zindex, stack, bgiframe, but not success.

Someone can help me?

Tks.

Trouble with jQuery Dialog and Datepicker plugins

Is it possible to add icons to the buttons on a jQuery UI Dialog?  I&#39;ve tried doing it this way:

    $(&quot;#DeleteDialog&quot;).dialog({
        resizable: false,
        height:150,
        modal: true,
        buttons: {
            &#39;Delete&#39;: function() {
                /* Do stuff */
                $(this).dialog(&#39;close&#39;);
            },
            Cancel: function() {
                $(this).dialog(&#39;close&#39;);
            }
        },
        open: function() {
            $(&#39;.ui-dialog-buttonpane&#39;).find(&#39;button:contains(&quot;Cancel&quot;)&#39;).addClass(&#39;ui-icon-cancel&#39;);
            $(&#39;.ui-dialog-buttonpane&#39;).find(&#39;button:contains(&quot;Delete&quot;)&#39;).addClass(&#39;ui-icon-trash&#39;);
        }
    });

The selectors in the open function seem to be working fine.  If I add the following to &quot;open&quot;:

    $(&#39;.ui-dialog-buttonpane&#39;).find(&#39;button:contains(&quot;Delete&quot;)&#39;).css(&#39;color&#39;, &#39;red&#39;);

then I do get a Delete button with red text.  That&#39;s not bad, but I&#39;d really like that little trash can sprite on the Delete button as well.

Edit:

I made a pair of tweaks to the accepted answer:

    var btnDelete = $(&#39;.ui-dialog-buttonpane&#39;).find(&#39;button:contains(&quot;Delete&quot;)&#39;);
    btnDelete.prepend(&#39;&lt;span style=&quot;float:left; margin-top: 5px;&quot; class=&quot;ui-icon ui-icon-trash&quot;&gt;&lt;/span&gt;&#39;);
    btnDelete.width(btnDelete.width() + 25);

Adding some top margin pushes the icon down, so it looks like it&#39;s centred vertically.  Adding 25 px to the button&#39;s width keeps the button text from wrapping onto a second line.

All Jquery Ui-Dialog Solutions on Gang of Coders

Total of 21 Jquery Ui-Dialog Solutions