Upon page load, I want to display a popup message. The popup is appearing correctly, but the close button in the bar is too big and doesn't fit properly. How can I adjust the size of the bar to accommodate the button?
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog({
width : 700,
height : 400,
modal: true
});
});
</script><link rel="stylesheet" href="https://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
</head>
<body>
<div id="dialog" style="display:none;" title=" ">
<iframe frameborder="0" scrolling="no" width="670" height="350" src="popUp.html"></iframe>
</div>
</body>
</html>