Echo Javascript function in PHP to display modal not displaying properly - php

Question

i have a code here which is intended to show a Javascript modal when a textbox is not filled (when send button is clicked it will check for unfilled textboxes and checkbox AND SHOW THE MODAL, if everything is fine, it will send an email...Im working on the textbox first). But I have some problem displaying the modal properly. It seems like when i use display: block it will be shown along with other objects in the form. but when i set it to display: none, nothing is being displayed even after the send button is clicked.
Here's the CSS for modal:
#overlay {
display: block;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 800;
}
#overlay div {
width:800px;
margin: 100px auto;
background-color: none;
border:none;
padding:15px;
text-align:center;
}
body {
height:100%;
width:100%;
margin:0;
padding:0;
overflow:auto;
}
HTML:
<div id="overlay">
<div>
<img src="images/NoUsername.png" alt="module" style="width:469px; height:345px;">
<p>[<a href='#' onclick='overlay()'>close</a>]</p>
</div>
I got these codes from http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/
Here is the PHP code for checking the textbox:
if ($username == "") {
echo
"<script type=\"text/javascript\">
function overlay() {
el = document.getElementById(\"overlay\");
el.style.visibility = (el.style.visibility == \"visible\") ? \"hidden\" : \"visible\";
}</script>";
}
I tried using double and single quotations here but nothing happens. I think the problem is in my CSS. Please feel free to edit my code. Thanks in advance for your help guys!

Answer 1

As I commented, you should study a little more CSS and HTML before going straight through programming like PHP and JavaScript. Your question will probably be flagged as low quality before you can really learn something meaningful from it.
I think the visibility attribute isn't suitable for your needs, as it allocates space in the DOM for the element even though it's hidden. I also think you should choose between showing the modal by PHP (server-side) or by JavaScript (client-side) as what you're doing now is becoming very confuse, even more for a novice.
I would modify your CSS to:
#overlay {
display: none; /* hidden if not overwritten by style="" attribute or javascript */
position: fixed; /* fixed makes more sense here as it doesn't depend on the element's parents, search for it */
...
IF you choose to show or hide the modal by php, it would be something like
<div id="overlay" <?php if ($username == "") echo 'style="display: block;"' ?>>
<div>
<img src="images/NoUsername.png" alt="module" style="width:469px; height:345px;">
...
OR, in my opinion the best approach, making it entirely in JavaScript (client-side), without relying on php:
<script type="text/javascript">
function show_modal() {
el = document.getElementById("overlay");
el.style.display="block";
}
function hide_modal() { // You'll want to use this for the close button
el = document.getElementById("overlay");
el.style.display="none";
}
function verify_elements() {
el = document.getElementById("username");
if (el.value == '') {
show_modal(); // if the username is '', show'em the modal
return false; // returning false makes sure the form isn't submited
}
}
</script>
<form action="" method="post" onsubmit="verify_elements()">
<input name="username" id="username" value="" />
...
I hope it helps to put you in right path. But you should really go step-by-step into this if you really want to learn instead of copy-and-paste forever :D
Best Regards!

Answer 2

I think that you missed to call the function added to the page:
if ($username == "") {
echo
"<script type=\"text/javascript\">
function overlay() {
el = document.getElementById(\"overlay\");
el.style.visibility = (el.style.visibility == \"visible\") ? \"hidden\" : \"visible\";
}
overlay();
</script>";
}
Also, I believe that the overlay should be hidden by default:
#overlay {
display: block;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 800;
visiblity: hidden;
}