Friday, November 4, 2011

How to popup your page in the center of computer screen using Javascript.

Sometime, we want to show a small window in the center of computer screen and on top of the main browser window. This small window is popularly known as a popup. Let's start here for Javascript Popup.

Javascript Popup

First,  create "JavaScriptPopup.aspx" and put the below script to <head> tag.

<script type="text/javascript">
    function showPopUp(url) {
        var w = screen.availWidth;
        var h = screen.availHeight;
        var popW = 500;
        var popH = 300;
        var leftPos = (w - popW) / 2;
        var topPos = (h - popH) / 2;
        newwindow = window.open(url, 'Terms of Use', 'width=' + popW + ',height=' + popH + ',top=' + topPos +
        ',left=' + leftPos + ',toolbar=no,status=no,menubar=no,location=no,scrollbars=yes,resizable=no');
        if (window.focus) { newwindow.focus() } //place the focus on the new window
        return false; //to prevent the browser from following the actual link.
   }
</script>

Add the following code to <form> tag.
<form id="form1" runat="server">
        <a href="tou.aspx" onclick="return showPopUp('tou.aspx')">Link to popup</a>
 </form>

Second, create "tou.aspx" for content (Popup) as below.

<form id="form1" runat="server">
    <p>
        <strong>Basic Terms</strong>
        <br />
        You must be 13 years or older to use this site.
        <br />
        You are responsible for any activity that occurs under your blog name.
        <br />
        You are responsible for keeping your password secure.
        <br />
        You must not abuse, harass, threaten, impersonate or intimidate other iBlogSeeker
        users.
        <br />
        You may not use the iBlogSeeker.com service for any illegal or unauthorized purpose.
        International users agree to comply with all local laws regarding online conduct
        and acceptable content.
        <p><a href="javascript:self.close()">Close</a> the popup.</p>
    </p>
</form>



When you click the link, it show Popup page and "Close" link for disappear the Popup. Enjoy the script!

Javascript popup details

No comments:

Post a Comment