How can I ensure that this modal dialog only disappears when the user accepts the agreement? In other words, I want the modal to always appear if the accept button was never clicked. I only want this to pop up once per browser session. So far the modal dialog can be bypassed if the user refreshes the page. Is this possible? See JSFIDDLE example below:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Modal message</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
var dialogShown = sessionStorage.getItem("dialogShown")
if (!dialogShown){
$( "#dialog-message" ).dialog({
modal: true,
width: 400,
buttons: {
Accept: function() {
$( this ).dialog( "close" );
}
}
});
sessionStorage.setItem("dialogShown", 1)
}
else {
$("#dialog-message").hide();
}
} );
</script>
</head>
<body>
<div id="dialog-message" title="Important Message">
<p><b>This is a U.S. Government System.</b><br><br>
<b>This system is for authorized users only.</b><br><br>
By accessing and using this information system, you acknowledge and consent to the following:<br>
<ul>
<li>You are accessing a U.S. Government information system (which includes any device attached to this information system) that is provided for U.S. Government-authorized use only. </li>
</ul>
</p>
</div>
</body>
</html>