JSFiddle - React, Tailwind, and code Playground

by markallgood

HTML

<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/redmond/jquery-ui.css">
<h1 id="toph1">Scrolling dialog test</h1>
<div id="dialogcontainer" style="display:none;">
<h4>Step 2: Enter the deposit amount</h4>
<p>
   Tap the amount field and enter the dollar amount of the check. Your per item deposit limit
   displays beneath the deposit Amount field.
</p>
<p>When done, tap the image of the front of the check in Step 3.</p>
<hr>
<h4>Step 3: Capture the check images</h4>
<p>
   </p><ol class="list">
      <li>
         Place the check with the front facing up on a well-lit surface, free of any 
         clutter. The color of the background should contrast that of the check and 
         should be a solid color.
      </li>
      <li>Tap the <b>Check</b> icon to activate the camera.</li>
      <li>
         Align the check within the green guidelines. Make sure the entire check is within 
         the guidelines and nothing else appears in the image.
      </li>
      <li>
         Take the picture. The image will be automatically cropped to the guidelines and
         converted to black and white.
      </li>
      <li>
         Make sure all the information on the check is present and clearly readable in 
         the image.
      </li>
   </ol>
<p></p>
<p>
   When done, tap the <b>Use</b> button to use the image that you have captured.  If you 
   would like to retake the image, tape the <b>Retake</b> button to activate the camera 
   and delete the existing image.  If you would like to delete the image and return to the
   Deposit Checks page, tap <b>Delete</b>.
</p>
<p>Next endorse the back of the check and capture the back check image.</p>
<p>
   </p><ol class="list">
      <li start="6">
         Flip the check over so that the back is facing up on a well-lit surface, free of 
         any clutter. The color of the background should contrast that of the check and 
         should be a solid color.
      </li>
      <li>
        ...

JavaScript

$(function() {
    var mydialog = $("#dialogcontainer").dialog({
        autoOpen: false,
        modal: false,
        title: "Test scrolling dialog",
        resizable: false,
        width: Math.min($(window).width(), 500),
        show: "fade",
        open: function(event, ui) {
            $(ui).css('background-color', 'red');     
        }
    }).css({
        "max-height": $(window).height() - 50,
        "overflow": "auto"
    });
    $("#toph1").click(function() {
        $("#dialogcontainer").dialog("open");
    });
});