JavaScript Popup Box with background window shaded

How to use a DIV tag with style display property and JavaScript to Fly Open a new Box Window with Parent Window shaded


You may be aware of the JavaScript alert function to create a simple window containing a message.
<script language="javascript" type="text/javascript">
alert('This is an alert message !');
</script>

But this is not fancy enough if you would like to pop up a box and do more than click OK. HTML DIV tags along with CSS style display property can come handy to simulate a popup box with HTML content.


Complete Source Code for Javascript popup box

<style type="text/css">

#flyBox {
    position: fixed;
    top:0px;
    left:0px;
    z-index: 998;
    height: 100%;
    width: 100%;
    background-image: url(http://i1122.photobucket.com/albums/l523/Long_Islander/backgroundFlyBox.png);
    display: none;
}
#flyBox .borderWindow {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    text-align: left;
    background-image: url(http://i1122.photobucket.com/albums/l523/Long_Islander/backgroundFlyBox.png);
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    padding: 12px;
}
#flyBox .container {
    position: relative;
}
#flyBox #closeButton {
    position:absolute;
    top: -15px;
    right: -15px;
}
#flyBox .content {
    background-color: #FFF;
    overflow:hidden;
}
.colheadingL {
 background-color: #383837;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 color: #FFFFFF;
 padding: 2px;
 text-align: left;
}
-->
</style>

<script language="JavaScript">

function displayPopup(alert_MSG) {
   
    var theDetail = document.getElementById('flyBox');
        theDetail.style.display="block";
}

function closePopup(alert_MSG) {
   
    var theDetail = document.getElementById('flyBox');
   
    if (theDetail.style.display=="block") {
        theDetail.style.display="none";
    }
}
</script>

JavaScript is an implementation of the ECMAScript language standard and is primarily used in the form of client-side JavaScript, implemented as part of a web browser in order to provide enhanced user interfaces and dynamic websites. This enables programmatic access to computational objects within a host environment.

<a href="javascript:displayPopup('flyBox')">Learn more about JavaScript!</a>

<div id="flyBox" style="display:none;">
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>

            <td align="center">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
       
                        <td class="borderWindow">
                            <div class="container">
                                <div id="closeButton"><a href="javascript:closePopup('flyBox')"><img src="http://i1122.photobucket.com/albums/l523/Long_Islander/flyBoxClose.png" width="28" height="28" alt="Close Button" border="0" /></a></div>
                                <div class="content">
                                    <table width="600" border="0" cellspacing="20" cellpadding="0">
<tr>
<td>
<div id="myMessageBox" name="myMessageBox">
<table width="100%"  border="0" cellspacing="2" cellpadding="0">
<tr>
<td class="colheadingL">More Info about JavaScript</td>
</tr>
        <tr>
            <td class="text1">
    JavaScript's use in applications outside web pages for example in PDF documents, site specific browsers and desktop widgets is also significant. Newer and faster Javascript VMs and frameworks built upon them (notably Node.js) have also increased the popularity of Javascript for server side web apps.

    JavaScript uses syntax influenced by that of C. JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics. The key design principles within JavaScript are taken from the Self and Scheme programming languages.

            </td>
        </tr>
</table>
</div>
</td>
</tr>

                                    </table>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>

        </tr>
    </table>
</div>

No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.