You can use JavaScript to create popup windows. Popup windows are different to simply opening a new browser window.
If you only want to open a new browser window you can add the target=”_blank” attribute within your <a> tag. Popup windows however, are more powerful. Using JavaScript’s window.open() method, you can determine what the window looks like (i.e. size, whether it has scrollbars, status bars etc) and also determine it’s position on the screen.
However you can do the same (creating pop windows) using buttons. I’ve already described that here.
Basic JavaScript to Generate a popup window
Here is the simplest JavaScript for generating a pop up window:
<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>
This will result in:
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
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 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>
This results in:
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.
Related posts:
- Add “Code” and “Blockquote” blocks in Blogger Blog Posts
- Easiest jQuery Featured Content Slider for Blogger Blogs
- Insert a Download Button in Blog Posts to Open Links in Popup Window
- How to Add Opacity Effect to Images in Blogger Blog
- Insert HTML/JavaScript Code inside Blogger Blog Posts – Quick Method
- How to Disable Clicks on Uploaded Images in Blogger Blog
- Add Related Posts Widget in Your Blogger Blog to Increase Readers’ Interest
- How to Create and Add Static Pages in Blogger/Blogspot Blog
Get Updates via Email
