When users encounter a sign-in form, they are faced with two options: submit or cancel. If they choose to submit, they will proceed with the action. If they decide to cancel, a different outcome will occur.
There seems to be a minor issue that might not bother me personally, but it could potentially bother my supervisor, which would then come back to affect me as well. The problem lies in the placement of the [x] button on the confirmation dialog popup. It appears to be misaligned, sitting outside of the designated x box rather than centered within it. This unexpected behavior has left me puzzled as to its cause.
Below is the JavaScript code I am using:
<script>
$(document).on('submit', "#signinform", function(e)
{
e.preventDefault();
var href = '<?php echo base_url(); ?>studentlogin_controller/agree';
$("#dialog-confirm").dialog(
{
resizable: false,
draggable: false,
height: 310,
width: 500,
modal: true,
buttons:
{
"Cancel": function()
{
$(this).dialog("close");
},
"Enter Queue": function()
{
window.location.href = href;
}
}
});
});
$(document).on('click', "#Cancel", function(e)
{
e.preventDefault();
var href = '<?php echo base_url(); ?>studentlogin_controller/studentlogin';
$("#dialog-noconfirm").dialog(
{
resizable: false,
draggable: false,
height: 310,
width: 500,
modal: true,
buttons:
{
"Cancel": function()
{
$(this).dialog("close");
},
"Go Back": function()
{
window.location.href = href;
}
}
});
});
And here is the corresponding HTML code:
<div id="dialog-confirm" title="Please Confirm" style="display: none;">
<ul>
<li>By clicking <FONT COLOR="red">"Enter Queue"</FONT>, counselors will be notified that you are present and should take a seat.</li>
<br>
<li>If you click <FONT COLOR="red">"Cancel"</FONT>, you will not be added to the student queue.</li>
</ul>
</div>
<div id="dialog-noconfirm" title="Please Confirm" style="display: none;">
<ul>
<li>By clicking <FONT COLOR="red">"Go Back"</FONT>, your information will be removed from the current session.</li>
<br>
<li>If you click <FONT COLOR="red">"Cancel"</FONT>, your information will remain active, and you will stay on the current page.</li>
</ul>
</div>
In addition, the theme includes and CSS used are as follows:
<link rel="stylesheet" href="<?php echo base_url(); ?>css/mainstyle.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/secondarystyles.css" type="text/css"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>javascript/themes/smoothness/jquery-ui-1.8.4.custom.css"/>
<script src="<?php echo base_url(); ?>javascript/js/jquery.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>javascript/js/jquery-ui-1.10.2.custom.js" type="text/javascript"></script>
This issue is observed specifically in Google Chrome browser.