Error message overlay the popup window

Hi all. So I’ve popup window appearing upon clicking the “create order”. And upon submission of the popup form, if there is any error, a error message would appear. However, currently, my error message would appear only if the popup window is closed. In another words, after clicking “ok” on the error message, the user will have to re-click the “create order” again to see which part of the form is not filled in properly.

So my question is, how can I let the error message to overlay the popup window. And the popup window will only close when the form is successfully submitted.

Here is my code.

<?php
	$selection 	= '';
	$type		= '';
	$size 	= '';
	$bidprice  = '';
	$offerprice 	= '';
	$stoploss		= NULL;
	$takeprofit		= '';
////////////////////////////////
	$Error 	= '';
	$selectionError 	= '';
	$typeError 	= '';
	$sizeError = '';
	$bidpriceError 	= '';
	$offerpriceError = '';
	$stoplossError 	= '';
	$takeprofitError 	= '';
	
	$message = '';
	
	$errors = array();
	
	$noErrors = true;
	
	$haveErrors = !$noErrors;
	
	require_once('tradeformresult.php');
		if ($noErrors && $userArriveBySubmittingAForm) {
		
		require_once('price.php');// INSERTION
		echo "<script type='text/javascript'>\
";
		echo "protected void Page_Load(object sender, EventArgs e)
		{
           if (Page.IsPostBack)
           {

               specialBox.Visible=true;

           }
		}\
";
			echo "</script>";
		echo "<script type='text/javascript'>\
";
		echo "alert('Trade is successfully executed!');\
";
		echo "</script>";
		
		
		
	///////////MESSAGE/////////////////	
	}
		 elseif ($haveErrors && $userArriveBySubmittingAForm) {
	 	
	 	echo "<script type='text/javascript'>\
";
		echo "alert('Please re-enter your parameters.');\
";
		echo "</script>";
		echo "<script type='text/javascript'>\
";
		echo "protected void Page_Load(object sender, EventArgs e)
		{
           if (Page.IsPostBack)
           {

               specialBox.Visible=true;

           }
		}\
";
			echo "</script>";
	
		
		$message = "\	\	" . '<font color="red">Fail!</font><br />' . "\
";
		$message = $message . "\	\	" . 'Validation errors : <br />' . "\
";

		$message = $message . "\	\	" . '<ol>' . "\
";
		
		foreach ($errors as $key=>$errorMessage) {
			$message = $message . "\	\	\	" . '<li>' . $errorMessage . '</li>' . "\
";
			if ($key == 'selection') {
				$selectionError = $errorMessage;
			}
			if ($key == 'type') {
				$typeError = $errorMessage;
			}
			if ($key == 'size') {
				$sizeError = $errorMessage;
			}
			if ($key == 'bidprice') {
				$bidpriceError = $errorMessage;
			}
			if ($key == 'offerprice') {
				$offerpriceError = $errorMessage;
			}
			if ($key == 'stoploss') {
				$stoplossError = $errorMessage;
			}
			if ($key == 'takeprofit') {
				$takeprofitError = $errorMessage;
			}
			
			}	
			
			$message = $message . "\	\	" . '</ol>' . "\
";		
		
	 }
	

	 else if ($userArriveByClickingOrDirectlyTypeURL) { // we put the original form inside the $message variable
		$newTitle = 'The link is broken';

		$h1Title = '';

		$message = '';
	}
?>
<!DOCTYPE html>
<html>
<head><head><meta charset="UTF-8"></head>
<style type="text/css">
		
div#overlay {
	display: none;
	z-index: 2;
	background: #000;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	text-align: center;
}
div#specialBox {
	display: none;
	position: relative;
	z-index: 3;
	p.padding;
	
	padding-top:25px;
	padding-bottom:25px;
	padding-right:50px;
	padding-left:50px;
	
	margin: 150px auto 0px auto;

  border: 3px solid blue;
  outline: 3px solid darkblue;
	width: 500px;
	height: 500px;
	overflow:auto;
	background: #FFF;
	color: #000;
}
div#wrapper {
	position:absolute;
	top: 0px;
	left: 0px;
	padding-left:24px;
}
</style>
<script type="text/javascript">


function toggleOverlay(){
	var overlay = document.getElementById('overlay');
	var specialBox = document.getElementById('specialBox');
	overlay.style.opacity = .8;
	if(overlay.style.display == "block"){
		overlay.style.display = "none";
		specialBox.style.display = "none";
	} else {
		overlay.style.display = "block";
		specialBox.style.display = "block";
	}
}
</script>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox" runat="server" visible = "false">
<script type="text/javascript">
 OnClientClick="VisibleTab('specialBox'); return false;"
protected void Page_Load(object sender, EventArgs e)
{
           if (Page.IsPostBack)
           {

               specialBox.Visible=true;
               specialBox.Style.Add("display", "block");

           }
 }

    if(Page.IsPostBack)
    {
        specialBox.Attributes["display"] = "display";
    }
</script>

<p>Create Order
  <p><?php
$timestamp=time(); require_once 'start.php';
?>



<form action="tradeform.php" method="post" >
<input type="hidden" name="formSubmitted" value="true" runat="server">
<?php echo $message; ?>
<?php ?>
<?php if ($haveErrors || $userArriveByClickingOrDirectlyTypeURL) : ?>
	<fieldset>
<p>Symbol : <select name = "selection" id="selection">
<option disabled = "disabled" selected = "selected"> Choose one </option>
<option value="eur/usd"<?php If($selection=='eur/usd'){Echo 'selected';}?>>EUR/USD</option>
<option value="usd/jpy"<?php If($selection=='usd/jpy'){Echo 'selected';}?>>USD/JPY</option>
<option value="usd/cad"<?php If($selection=='usd/cad'){Echo 'selected';}?>>USD/CAD</option>
<option value="eur/jpy"<?php If($selection=='eur/jpy'){Echo 'selected';}?>>EUR/JPY</option>
<option value="eur/chf"<?php If($selection=='eur/chf'){Echo 'selected';}?>>EUR/CHF</option>
<option value="gbp/usd"<?php If($selection=='gbp/usd'){Echo 'selected';}?>>GBP/USD</option>
<option value="aud/usd"<?php If($selection=='aud/usd'){Echo 'selected';}?>>AUD/USD</option>
<option value="usd/chf"<?php If($selection=='usd/chf'){Echo 'selected';}?>>USD/CHF</option>

</select><font color="red"><?php echo $selectionError?></font>
<p> Date : <input type="datetime" value="<?php echo date("Y-m-d ",$timestamp); ?>"READONLY name="date"/></p>
<p> Type : <input type="radio" name="type" value="buy"<?php if ($type == 'buy') echo 'checked'; ?>> Buy <input type="radio" name="type" value="sell" <?php if ($type == 'sell') echo 'checked'; ?>>Sell<font color="red"><?php echo $typeError;?></font></p>
<p> Size : <input type="number"pattern="[0-9]+([\\.|,][0-9]+)?" step="0.01"min="0"name="size"value="<?php echo $size;?>"/><font color="red"><?php echo $sizeError?></font></p>
<p> Bid Price (Sell) : <input id="bidprice" READONLY name="bidprice" type="text" value="<?php echo $bidprice;?>"/><font color="red"><?php echo $bidpriceError?></font></p>
<p> Offer Price (Buy) :<input id="offerprice" READONLY name="offerprice" type="text" value="<?php echo $offerprice;?>"/><font color="red"><?php echo $offerpriceError?></font> </p>
<p> Stop Loss : <input type="number"step="any"min="0" name="stoploss" value="<?php echo $stoploss;?>"/><font color="red"><?php echo $stoplossError?></font></p>
<p> Take Profit : <input type="number"step="any"min="0"name="takeprofit"value="<?php echo $takeprofit;?>"/><font color="red"><?php echo $takeprofitError?></font></p>
</fieldset>
<div align="center">

<input type="submit" value="Submit"/><button onmousedown="toggleOverlay()">Close </button>
</div>
<input type="reset" name="Reset" value="Reset" tabindex="50">
<?php endif; ?>
</form>


 <script type="text/javascript">

 window.onload=function() {
  if (document.getElementById) {
 document.getElementById("selection").onchange=function() { switchme(this); }
  }
 }

  function switchme(SNewSel) {

 var ind = SNewSel.selectedIndex;
 var txt = document.getElementById('bidprice');
 var txt2 = document.getElementById('offerprice');
  switch (ind) {
  case 1: // car purchase
  txt.value = <?php echo json_encode($bid); ?>;
   txt2.value = <?php echo json_encode($bid1); ?>;
  break;
  case 2: // other purchase
  txt.value = <?php echo json_encode($bid2); ?>;
  txt2.value = <?php echo json_encode($bid3); ?>;

  break;
 case 3: // other purchase
 txt.value = <?php echo json_encode($bid4); ?> ;
  txt2.value = <?php echo json_encode($bid5); ?>;
 break;
 case 4: // other purchase
	 txt.value = <?php echo json_encode($bid6); ?> ;
	  txt2.value = <?php echo json_encode($bid7); ?>;
	 break;
 case 5: // other purchase
	 txt.value = <?php echo json_encode($bid8); ?> ;
	  txt2.value = <?php echo json_encode($bid9); ?>;
	 break;
 case 6: // other purchase
	 txt.value = <?php echo json_encode($bid10); ?> ;
	  txt2.value = <?php echo json_encode($bid11); ?>;
	 break;
 case 7: // other purchase
	 txt.value = <?php echo json_encode($bid12); ?> ;
	  txt2.value = <?php echo json_encode($bid13); ?>;
	 break;
 case 8: // other purchase
	 txt.value = <?php echo json_encode($bid14); ?> ;
	  txt2.value = <?php echo json_encode($bid15); ?>;
	 break;
	
 default:
 txt.value='';
 break;
 }
 }
 </script>



</body>
</html></p>

</div>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">

  <h2>Trade</h2>

  <button onmousedown="toggleOverlay();return false;">Create Order</button>

</div>


<!-- End Normal Page Content -->
</body>
</html>


Much help is needed due to my limited knowledge in php and javascript. Thanks.

Have the msg handled by the popup so it controls where it shows within its borders