Showing posts with label Javascript popup. Show all posts
Showing posts with label Javascript popup. Show all posts

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