jQueryUI Dialog

by Intesar Haider

HTML

<div id="myDialog">
    <div class="one">One 1111111111111</div>
    <div class="two" id="goto" >Two 1111111111111</div>
</div>

<button id="clickMe" onclick="myFunction()">Click Me</button>

CSS

.one{
  border:1px solid red;
  height:500px;
}
.two{
  border:1px solid green;
  height:500px;
}
.ui-dialog{
  height:500px!important;
  overflow:scroll;
}

JavaScript

//Set up the dialog box
$("#myDialog").dialog({
    autoOpen  : false,
    modal     : true,
    title     : "A Dialog Box",
    open   		:  function myFunction() {
                  var elmnt = document.getElementById("goto");
  								elmnt.scrollIntoView();
              },
             
});

//Open the dialog box when the button is clicked.
$('#clickMe').click(function() {
    $("#myDialog").dialog("open");
});