jQuery UI Dialog Extended

index.html

<button id="dButton">Responsive Dialog</button>
<article class="markdown-body entry-content" itemprop="mainContentOfPage">
  <h1></a>jQuery UI Dialog Options v1.0</h1>

  <p>Additional options/functionality for jQuery UI Dialog.</p>

  <p>New Options:</p>

  <ul>
    <li> clickOut: true // closes dialog when clicked outside</li>
    <li> responsive: true // fluid width &amp; height based on viewport</li>
    <li> showTitleBar: true // hide titlebar when false</li>
    <li> showCloseButton: true // hide close button when false</li>
  </ul>

  <p>Added functionality:</p>

  <ul>
    <li> add &amp; remove dialogClass to .ui-widget-overlay for scoping styles</li>
    <li> patch for: <a href="https://bugs.jqueryui.com/ticket/4671">https://bugs.jqueryui.com/ticket/4671</a> - fixed in UI v1.10</li>
  </ul>
<p><a href="https://github.com/jasonday/jQuery-UI-Dialog-extended">Get it on github</a></p>


</article>


<div id="content_1" class="content_dialog">
  <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
  <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
</div>

jquery-ui-dialog-extended.markdown

jQuery UI Dialog Extended

Making jQuery UI Dialog responsive, adding click outside to close and other features

A Pen by Jason Day on CodePen.

License.

script.js

$("#dButton").click(function () {
   $("#content_1").dialog('open');
});

 $("#content_1").dialog({
     width: 600,
    autoOpen: true,
    dialogClass: "test",
    modal: true,
    responsive: true
    });

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script src="//rawgit.com/jasonday/jQuery-UI-Dialog-extended/master/jquery.dialogOptions.js"></script>

style.css

* { font-family: sans-serif; }
#content_1 { display: none; }

styles

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" rel="stylesheet" />