My current issue involves creating a dialog with centered text, but I'm struggling to achieve the same effect with the title and button. Additionally, the button I've created doesn't seem to be functional when placed in the dialog box. Despite my attempts to center the JQuery dialog box after browser resize, I have not been successful. I would greatly appreciate any help in resolving these issues. Thank you all in advance for your assistance. Here is the link to the jsfiddle: https://jsfiddle.net/robontrix/194Ljr30/
HTML:
<div id="dialog">
<p style="text-align:center"> Your computer use can be monitored by others! Consider using a public computer or a friend's computer. Please view more computer safety tips or escape to Google. Then more computer safety tips linked to a page with details about browser history, cache, search history, etc. and escape to Google linked to Google.</p>
<p style="text-align:center"> To learn more how to computer safety, click the following link: <br><a href="#">Safety Tips</a></br></p>
<!--Wording can be better just for the meantime-->
<p style="text-align:center"> If you are not safe, click the following link: <br><a href="#">Get Me Out of Here!</a></br></p>
</div>
<!--JQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$('#dialog').attr('title','Safety Warning!').dialog({
width : 700,
height: 350,
modal:true,
opacity:.7,
closeOnEscape: true,
draggable: false,
resizable: false,
buttons: { "Close": function() {
$(this).dialog("close");
}
}
});
$(window).resize(function() {
$('#dialog').dialog('option','position', 'center');
});
</script>