ansaurus

Question

What is best lightweight unobtrusive solution to open any link in custom size popup?

Answer 1

A:

Are you looking for something along the lines of JQuery UI Dialog?

I wouldn't recommend "real" popups (i.e. separate browser windows) because they tend to get blocked more and more, and can't be styled fully (IE > 7 and FF will force an address bar onto the popup for security reasons).

Pekka 2010-02-13 11:26:53

If you click a link to open the "popup" window then it won't get blocked. It is the auto-open popups that get blocked (e.g. on page load). I use a link to open a popup window, for example, to let my users enter blood pressure. It works just fine despite my pop-up blocker.

Mark Brittingham 2010-02-13 11:36:38

@Pekka - I don't want to use bulky jquery UI for a popup only

metal-gear-solid 2010-02-13 11:39:46

@Jitendra then you need to work with Adam's solution. I wouldn't use popups anymore for the reasons I outlined, but it's certainly possible.

Pekka 2010-02-13 11:43:22

@Pekka - but only real popup is accessible if javascript is disabled

metal-gear-solid 2010-02-13 11:53:26

@Jitendra not true. You can add the JQuery dialog opener function to a normal link with a fallback `href` exactly like when using `window.open`. There's no difference, both a real popup and jquery UI need Javascript enabled to work.

Pekka 2010-02-13 12:02:50

Answer 2

+1 A:

I don't think it's generally good idea, but suit yourself.

Oh, you can't center window, it's OS-specific this way.

Edit: As Pekka awarned me, you can set you position, so improved (untested) solution:
Edit 2: Edited as questioneer wanted and also, what bobince pointed out - $this doesn't exist

<a id="close" href="your-link" target="_blank" title="opens in a new window">close</a>

and

$(document).ready(function(){
    $("#close").attr('title','opens in a new pop-up'); //set new title

    $("#close").click(function(){ //click action
        w = parseInt((screen.width - 600)/2); h = parseInt((screen.height - 400)/2);
        cwin = window.open($(this).attr('href'), 'closewin',
       'status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=0,scrollbars=0,height=400,width=600');
        cwin.moveTo(w,h);
        return false;
    });
});

Unfortunately, I don't know how to set height based on content, that would need more calculations.

Adam Kiss 2010-02-13 11:28:01

Oh but you can! There is a `moveTo` method. http://javascript.about.com/library/blpopup5.htm could be blocked by the browser nowadays though, it's been a long time that I've last used this.

Pekka 2010-02-13 11:31:39

`$this` -> `$(this)`.

bobince 2010-02-13 12:51:51

Answer 3

A:

The first step is the fallback for when script is disabled, using the target attribute to open the page in a new window or new tab:

<a href="page.html" target="_blank">page</a>

Then you can add script to take over the click event:

<a href="page.html" target="_blank" onclick="window.open(this.href,this.target,'width=200,height=300');return false;">page</a>

You can use jQuery instead to apply the event to the links you want, for example applying it to all links with class="popup":

$(function(){
  $('a.popup').click(function(e){
    window.open(this.href,this.target,'width=200,height=300');
    e.preventDefault();
  });
});

You can add more values in the feature string, like location=0,menubar=0,status=0,toolbar=0 to try to remove toolbars and such from the window. However support for this is browser specific, and the location is generally not possible to hide.

You can also attempt to get the screen resolution and calculate coordinates to center the popup, using the top=...,left=... values. Getting the screen resolution is browser specific, so you would only apply it if it's available.

To get a close button in the popup you need a proxy page that can open the page in an iframe. Then the code gets a little longer, of course:

$(function(){
  $('a.popup').click(function(e){
    var w = window.open('',this.target,'width=200,height=300')
    w.document.open();
    w.document.write(
      '<html>'+
      '<head>'+
      '<style>'+
      'iframe { border: none; height: 250px; }'+
      'a { float: right; padding: 10px; }'+
      '</style>'+
      '</head>'+
      '<body>'+
      '<iframe src="'+this.href+'"></iframe>'+
      '<a href="javascript:window.close();">Close</a>'+
      '</body>'
    );
    w.document.close();
    e.preventDefault();
  });
});

Guffa 2010-02-13 11:47:40

i need popup vertically and horizontally center on any screen resolution.

metal-gear-solid 2010-02-13 11:51:24

and height of pop-up can be increased upon content so i only want to fix width and height of popup should upon content and if content of popup (height) would go to under the fold then vertical bar would be shown in main browser window

metal-gear-solid 2010-02-13 11:57:39

@Jitendra: What you are asking for is contradicting the lightweight solution that you wanted. Centering the popup is browser specific, so that's not always possible. Making the popup resize itself to the content requires that the page that you open is in the same domain, and combining that with the close button makes it increasingly complex as you now have both a window and an iframe to resize. Besides, some browsers doesn't even allow resizing windows using script. So, you have to decide between lightweight and some of the other features.

Guffa 2010-02-13 12:16:24

@Guffa - I have multiple links on same page and all link would be open in a new window and some popup page has more content and some has less so height can be varied. so if i will fix the height in javascript then it will be applied on all popup

metal-gear-solid 2010-02-13 12:24:40

@Jitendra: You could make a function that takes the desired size, and call it with specific values from the onclick event of each link.

Guffa 2010-02-13 20:52:44

Answer 4

A:

This a good lightweight solution

http://www.84bytes.com/2008/08/17/creating-beautiful-pop-ups-using-jquery/

metal-gear-solid 2010-02-13 13:15:09

ansaurus

tags:

views:

answers:

What is best lightweight unobtrusive solution to open any link in custom size popup?

related questions