Blog Archive

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>

3 comments :

  1. dear I want to add lot of ja query popups in one blogger post page,,, with different content etc. but when I installed many codes in one page, and click to open any popup,,, only first popup opens and when try to open others ,, no other codes work,, only one pop up opens again and again
    what can I do for adding many popups in single post page

    ReplyDelete