• How To Add JavaScript To Open Popup Window On Blogger


    Basic JavaScript to Generate a popup window

    Go to-New post-Edit Html-Paste Html Code

    <script type="text/javascript">
    // Popup window code
    function newPopup(url) {
    popupWindow = window.open(
    url,'popUpWindow','height=500,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,
    location=no,directories=no,status=yes')
    }
    </script>
    <a href="JavaScript:newPopup('http://www.google.com');">Open a popup window</a>







    Open a popup window

    Where:
    - Red are width and height of the popup window.
    - Purple are the optional attributes (change to “no” to turn off those attributes).
    - Blue is the actual link to be opened in the popup.
    - Black (bold) is the text which is visible to user.

    Automatically center your popup

     Go to-New post-Edit Html-Paste Html Code

     Similarly if you want to automatically position your window in the center of the users’ screen use the following code. The JavaScript code will detect the be screen size (as each user could have a different screen size), then position the popup window in the center.

    <script language="javascript">
    var popupWindow = null;
    function centeredPopup(url,winName,w,h,scroll){
    LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
    TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
    settings =
    'height=' h ',width=' w ',top=' TopPosition ',left=' LeftPosition ',scrollbars=' scroll ',resizable'
    popupWindow = window.open(url,winName,settings)
    }
    </script>
    <p><a href="http://www.google.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false">Centered Popup</a></p>






    Centered Popup

    Where:
    - Red are width and height of the popup window respectively.
    - Purple is the attribute for the scrollbars in the popup. (Change to “no” to disable scrollbars)
    - Blue is the actual link to be opened in the popup.
    - Black (bold) is the text which is visible to user.



    5 comments:

    1. really it does not work on my blog

      ReplyDelete
    2. want make money online for free ,you can visit my site http://ectheme.blogspot.com/
      or contact me with howaves@gmail.com i will teach you step by step

      ReplyDelete
    3. help ful

      http://www.mazadownloads.com

      ReplyDelete
    4. http://www.lootre.blogspot.com
      for best deal on online...thx for post...

      ReplyDelete