Replacing The Close Icon for a Jqueryui Dialog Box

Replacing the Close icon for a JQueryUI Dialog box

Try to see the structure of the dialog and it should not be hard to do it.

http://jqueryui.com/demos/dialog/#theming

Use the create event to change the class of the close button icon to class of another icon will do.

http://jsfiddle.net/Quincy/kHU2M/1/

$("#dialog-search").dialog({
    create: function(event, ui) { 
      var widget = $(this).dialog("widget");
      $(".ui-dialog-titlebar-close span", widget)
          .removeClass("ui-icon-closethick")
          .addClass("ui-icon-minusthick");
   }
});

How to remove close button on the jQuery UI dialog?

I have found this worked in the end (note the third line overriding the open function which find the button and hides it):

$("#div2").dialog({
    closeOnEscape: false,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
    }
});

To hide the close button on all dialogs you can use the following CSS too:

.ui-dialog-titlebar-close {
    visibility: hidden;
}

Best way to remove the close button on jQuery UI dialog box widget?

I found this to be a good solution

$("#myDialogID").dialog({
    closeOnEscape: false,
    beforeClose: function (event, ui) { return false; },
    dialogClass: "noclose"
});

Not altering the existing styles, instead adding a new bit:

.noclose .ui-dialog-titlebar-close
{
    display:none;
}

Adding the class ended up being quite an elegant method, as i'm "classing" the dialog as one that cannot be closed.

jQuery UI Dialog - missing close icon

I am late to this one by a while, but I'm going to blow your mind, ready?

The reason this is happening, is because you are calling bootstrap in, after you are calling jquery-ui in.

Literally, swap the two so that instead of:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

it becomes

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

:)

Edit - 26/06/2015 - this keeps attracting interest months later so I
thought it was worth an edit. I actually really like the noConflict
solution offered in the comment underneath this answer and clarified
by user Pretty Cool as a separate answer. As some have reported issues
with the bootstrap tooltip when the scripts are swapped. I didn't
experience that issue however because I downloaded jquery UI without
the tooltip as I didn't need it because bootstrap. So this issue never
came up for me.

Edit - 22/07/2015 - Don't confuse jquery-ui with jquery! While
Bootstrap's JavaScript requires jQuery to be loaded before, it doesn't rely on jQuery-UI. So jquery-ui.js can be loaded after bootstrap.min.js, while jquery.js always needs to be loaded before Bootstrap.

Jquery-ui dialog box 'x' button image is not visible

Try this..

Include "sprite image" and if you put css file in project css folder means put image in image folder and add following changes

.ui-state-default .ui-icon {
    background-image: url("images/ui-icons_888888_256x240.png");//change path of image in css(jquery-ui.css)
}

How do I make the JQuery UI dialog close button look like an 'X' icon?

There is a default close icon in jQuery UI framework:

.ui-icon-close{background-position:-80px -128px}

or

.ui-icon-circle-close{background-position:-32px -192px}

Just take a look into generated CSS and make sure you downloaded the framework correctly (with all images).

How to change the 'X' button in a jquery dialog box to read 'Close'

You can modify the dialog part of the jQuery code above as:

.dialog({
    open: function(event, ui) {
        $('.ui-dialog-titlebar-close')
            .removeClass("ui-dialog-titlebar-close")
            .html('<span style="float:right;">Close</span>');
    }
})

Hope this helps!

Ui-modal-dialog ui-icon-close color change

You can overwrite the icons with the following CSS:

.ui-state-default .ui-icon {
    background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ffffff_256x240.png) !important;
}

You can download the icon png file in any color you like. Just change the color part in the following url:

http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png

COLOR - Change color code like ff0000,ffffff

(but don't use the URL as a CDN, be nice and save the files locally)

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {  _title: function(title) {    if (!this.options.title) {      title.html(" ");    } else {      title.html(this.options.title);    }  }}));$("#dialog").dialog({  autoOpen: false,  　　height: 300,  width: 830,  dialogClass: 'myTitleClass',  modal: true,
  title: "Carpe Diem. Nunca Acredito Posteiro",  closeOnEscape: false,  open: function(event, ui) {    $('.ui-dialog-titlebar-close', ui.dialog | ui);  },  buttons: {    "Save": function() {      $(this).trigger(updateKeyword());    }  }})
$("#opener").click(function() {  $("#dialog").dialog("open");});

.ui-state-default .ui-icon {    background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ffffff_256x240.png) !important;}
input#opener {   height: 30px;   width: 200px;   left: 50%;   margin-top: -15px;   /* = -height / 2   */   margin-left: -100px;   /* = -width / 2    */   position: fixed;   top: 80%;   background: rgba(4, 115, 184, 0.9);   color: #fff;   font-style: Arial;   font-size: 16px;   font-weight: 700;   line-height: 1.5;   border-style: outset;   display: flex;   transition: .5s ease;   vertical-align: middle;   justify-content: center; }  .myTitleClass .ui-dialog-title {   white-space: normal; }  .myTitleClass .ui-dialog-titlebar {   background: rgba(4, 115, 184, 0.9);   color: #fff;   font-size: 16px;   font-weight: 700;   height: 60px; }  .myTitleClass .ui-widget-content .ui-state-default {   background-image: none;   background-color: rgba(4, 115, 184, 0.6);   color: #fff;   font-size: 16px;   font-weight: 700;   border-style: none; }  .myTitleClass .ui-widget-content .ui-state-hover {   background-image: none;   background-color: rgb(4, 127, 184);   color: #fff;   font-size: 16px;   font-weight: 700;   border-style: none; }  .ui-widget-overlay {   position: fixed;   background: black; }  .myTitleClass .ui-dialog-titlebar-close {   background: rgba(4, 115, 184, 0.9);   border-radius: 17px;   height: 33px;   margin: -10px 0 0;   padding: 1px;   position: absolute;   right: -28px;   top: -24%;   width: 33px; }  .myTitleClass.ui-icon-close {   background-image: url("images/ui-icons_ffffff_256x240.png"); }  .ui-dialog {   overflow: visible; }}

<script type="text/javascript" src="jsapi/utils.min.js"></script><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript" src="js/script.js"></script><link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"><script src="//code.jquery.com/jquery-1.10.2.js"></script><script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script><input type="button" id="opener" value="Register Keyword"></button><div id="dialog">Merry Christmas.</div>

---

Related Topics