title: place the button overlapping top-right corner of the ui-modal dialog
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  $.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
    _title: function(title) {
      if (!this.options.title) {
        title.html("&amp;#160;");
      } 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");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input#opener {
    position: absolute;
    transition: .5s ease;
    top: 80%;
    left: 45%;
    overflow: visible;
    background: rgba(4, 115, 184, 0.9);
    color: #fff;
    font-style: Arial;
    font-size: 16px;
    font-weight: 700;
    line-height: 2.5;
    position: center;
    border-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .myTitleClass .ui-dialog-title {
    overflow: visible;
    white-space: normal;
  }
  
  .myTitleClass .ui-dialog-titlebar {
    overflow: visible;
    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: rgba(4, 115, 184, 1);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-style: none;
  }
  
  .ui-widget-overlay {
    position: fixed;
  }
  
  .ui-widget-overlay {
    background: none;
  }
  
  .myTitleClass .ui-dialog-titlebar-close {
    border-radius: 17px;
    height: 33px;
    margin: -10px 0 0;
    padding: 1px;
    position: absolute;
    right: -28px;
    top: -24%;
    width: 33px;
    overflow: visible;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"&gt;
  
  &lt;input type="button" id="opener" value="Register Keyword" /&gt;
  &lt;/button&gt;
  &lt;div id="dialog"&gt;Merry Christmas.
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am struggling to place close button overlapping on the top-right corner of ui-modal-dialog. Even if I allowed overflow: visible, the close button still is getting stuck in the corner. How can I do place the close button like the following image? Shoud I hide the close button on ui-modal-dialog and need to use only html and css without jquery.</p>
  
  <p><a href="https://i.stack.imgur.com/M6iSn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M6iSn.jpg" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
    _title: function(title) {
      if (!this.options.title) {
        title.html("&amp;#160;");
      } 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");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input#opener {
    position: absolute;
    transition: .5s ease;
    top: 80%;
    left: 45%;
    overflow: visible;
    background: rgba(4, 115, 184, 0.9);
    color: #fff;
    font-style: Arial;
    font-size: 16px;
    font-weight: 700;
    line-height: 2.5;
    position: center;
    border-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .myTitleClass .ui-dialog-title {
    overflow: visible;
    white-space: normal;
  }
  
  .myTitleClass .ui-dialog-titlebar {
    overflow: visible;
    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: rgba(4, 115, 184, 1);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-style: none;
  }
  
  .ui-widget-overlay {
    position: fixed;
  }
  
  .ui-widget-overlay {
    background: none;
  }
  
  .myTitleClass .ui-dialog-titlebar-close {
    border-radius: 17px;
    height: 33px;
    margin: -10px 0 0;
    padding: 1px;
    position: absolute;
    right: -28px;
    top: -24%;
    width: 33px;
    overflow: visible;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/script&gt;
  &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&gt;
  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;input type="button" id="opener" value="Register Keyword"&gt;
  &lt;/button&gt;
  &lt;div id="dialog"&gt;Merry Christmas.
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>