Pop Over Form Using Hidden DIV

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2006 Roderick Divilbiss">
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<title>Pop Over Form</title>
<script type="text/javascript">
<!--
function showForm() {
    oDiv = document.getElementById('theFormDiv');
    oDiv.style.display='block';
    return false;
}

function hideForm() {
    oDiv = document.getElementById('theFormDiv');
    oDiv.style.display='none';
    return false;
}
//-->
</script>
<style type="text/css">
#theFormDiv {
    display:none;
    position:absolute;
    top:4em;
    left:4em;
    background-color:#EEE;
    border:1px solid #000;
    padding:1em;
    margin:3em;
    width:28em;
}

body {
    color: #000000;
    background: #FFFFFF;
    text-align: left;
    font-size: 0.9em;
    font-family: Arial, Helvetica, sans-serif;
}

form {
    width:24em;
}

form fieldset {
    float: left;
    width:22em;
    margin:0 0.3em 0.3em 0;
}

form legend {
    font-weight:bold;
    color:blue;
}

form p {
    margin: 0;
}

form label {
    float:left;
    margin:0.5em;
}

form input {
    width:100%;
    font-size:100%;
}

/* thisForm.css */
#label-first, #label-last {
    width:8em;
}

#label-middle {
    width:2em;
}

#label-address, #label-email {
    clear:left;
    width:20em;
}

#label-city {
    clear:left;
    width:9em;
}

#label-state {
    width:2em;
}

#label-zipcode {
    width:7em;
}

#label-homephone {
    clear:left;
    width:9.5em;
}

#label-workphone {
    width:9.5em;
}

#bSubmit {
    float:left;
    margin:0.5em;
    clear:left;
    width:auto;
}

#bCancel {
    float:left;
    margin:0.5em;
    width:auto;
}

.field-hint {
    font-size:0.7em;
    color:#555555;
}

.nocss {
    display:none;
}
</style>
</head>

<body>
<div id="theExample">
    <p><a title="open form" href="#" onclick="return showForm();">Click To Open Form</a></p>
</div>
<div class="breaker"><br></div>
<div class="breaker"><br></div>
<div id="theFormDiv">
    <form method="post" id="frm" action="popOverForm.asp">
        <fieldset>
        <legend>Name &amp; Address</legend>
        <p>
            <label id="label-first">First Name*
            <input name="first" type="text">
            <span class="nocss">Efield-hinte entry: </span>
            <span class="field-hint">John</span></label>
        </p>
        <p>
            <label id="label-middle">MI
            <input name="middle" type="text">
            <span class="nocss">Efield-hinte entry: </span>
            <span class="field-hint">Q</span></label>
        </p>
        <p>
            <label id="label-last">Last Name*
            <input name="last" type="text">
            <span class="nocss">Efield-hinte entry: </span>
            <span class="field-hint">Public</span></label>
        </p>
        <p>
            <label id="label-address">Address*
            <input name="address" type="text">
            <span class="nocss">Efield-hinte entry: </span>
            <span class="field-hint">1234 Any St, Apt#4</span></label>
        </p>
        <p>
            <label id="label-city">City*
            <input name="city" type="text">
            <span class="nocss">Efield-hinte entry: </span>
            <span class="field-hint">Hometown</span></label>
        </p>
        <p>
            <label id="label-state">ST*
            <input name="state" type="text">
            <span class="nocss">Efield-hinte entry: </span>
            <span class="field-hint">AL</span></label>
        </p>
        <p>
            <label id="label-zipcode">Zip Code*
            <input name="zipcode" type="text">
            <span class="nocss">Efield-hinte entry: </span>
            <span class="field-hint">99999-9999</span></label>
        </p>
        </fieldset>
        <fieldset>
        <legend>Contact Information</legend>
        <p>
            <label id="label-email">E-Mail Address*
            <input name="email" type="text">
            <span class="nocss">Efield-hinte entry: </span>
            <span class="field-hint">john.public@domain.com</span></label>
        </p>
        <p>
            <label id="label-homephone">Home Phone
            <input name="homephone" type="text">
            <span class="nocss">Efield-hinte entry: </span>
            <span class="field-hint">(999) 999-9999</span></label>
        </p>
        <p>
            <label id="label-workphone">Work Phone
            <input name="workphone" type="text">
            <span class="nocss">Efield-hinte entry: </span>
            <span class="field-hint">(999) 999-9999</span></label>
        </p>
        <p>
            <input type="submit" id="bSubmit" name="bSubmit" value="Submit">
            <input type="button" id="bCancel" name="bCancel" value="Cancel" onclick="hideForm();">
        </p>
        </fieldset>
    </form>
</div>
</body>
</html>
How can you pop a form page without being blocked by pop-up blockers?
