Hello all,
I recently have been working on a JQuery Dialog message popup window. I have a current timer checking the time of the computer and if it is after 10 A.M. the Dialog window will appear.
I have the window working but I seem to only be able to get it working when I have all the code in the main window on a button click. By saying this I am meaning that the <Script> - Javascript/JQuery code, Style – CSS, and <Div> - HTML code is all in the window where this is going to appear.
I been trying to put the Script code in my external javascript file for the project I have been working on, and same goes with the CSS but when I do this my popup dialog window does not work.
I am looking for suggestions or anything that will help me achieve this. Or do you think I should leave it all in my index.html file? Which is my main page of the site.
Here is what I have for code for internal working and some external tries.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style>
.ui-widget-header, .ui-state-default, .ui-button {
background: #b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<script>
$(function () {
$("#cutoffwindow").dialog({
autoOpen: false,
buttons: {
OK: function ($this) { $(this).dialog("close"); }
},
title: "success",
modal: true,
position: {
my: "center",
at: "center"
}
});
});
</script>
<div id="cutoffwindow">Past accepted cutoff time</div>
<!-- test cutoff window-->
<button id="testcutoff" type="button">Test cutoff!</button>
$('#testCutoff').click(function () {
$('#cutoffDialog').dialog("open");
});
$('#testCutoff').click(function () {
var $displayIt = $("#cutoffDialog");
$displayIt.css('display', 'block');
});
function jQueryDialog() {
$('#cutoffDialog').dialog({
autoOpen: false,
buttons: {
OK: function () { alert("You want this tomorrow!"); }
},
title: "title after cutoff time",
modal: true,
position: {
my: "center",
at: "center"
}
});
}
#cutoffDialog {
display: none;
}
<button type="button" id="testCutoff">Cutoff Test</button>
<div id="cutoffDialog">The time is after 10.A.M. <br /> Do you want your sandwich for tomorrow?</div>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id="dialog-1" title="Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id="opener">Open Dialog</button>
</body>
</html>