Pop-up window in JavaScript

Question

I'm using a custom Tumblr share button on my Blogger-based website and I'd like the share screen to open in a pop-up window. Right now it opens in a new tab.

Can someone please show me how to do this?

<div class='tumblr-button'>
<script>
var strPostUrl = "<data:post.url/>";
var strPostTitle = '<data:post.title/>';
var strNewUrl = strPostUrl.replace("http://","");
var strNewTitle = strPostTitle.replace(/"/g, '"');
document.write("<a href='http://www.tumblr.com/share/link?url="+strNewUrl+"&amp;name="+strNewTitle+"' target='_new'><img src='http://platform.tumblr.com/v1/share_1.png'/></a>");
</script>
</div>

I think this is what you are looking for: http://stackoverflow.com/questions/726761/javascript-open-in-a-new-window-not-tab — Behrad Farsi, Feb 19 '13 at 10:26

Jaykesh Patel · Answer 1 · 2013-02-19T11:26:28.167

1

   <div class='tumblr-button'>
    <script>
    var strPostUrl = "http://google.com";
    var strPostTitle = 'Google';
    var strNewUrl = strPostUrl.replace("http://","");
    var strNewTitle = strPostTitle.replace(/"/g, '"');

    </script>
    <a href='javascript:void(0);' id='tumblr'><img src='http://platform.tumblr.com/v1/share_1.png'/></a>
</div>
    <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#tumblr').click(function(){
         var width  = 775,
            height = 500,
            left   = ($(window).width()  - width)  / 2,
            top    = ($(window).height() - height) / 2,        
            opts   = 'status=1' +
            ',width='  + width  +
            ',height=' + height +
            ',top='    + top    +
             ',left='   + left;
    var url = "http://www.tumblr.com/share/link?url="+strNewUrl+"&name="+strNewTitle;
    window.open(url , 'tumblr', opts);
    });
   });
    </script>

check demo code on http://jsfiddle.net/gzMXd/

edited Feb 19 '13 at 11:26

answered Feb 19 '13 at 10:29

Jaykesh Patel

2,130
1
14
18

Thanks so much for the answers so far. I've tried this but it doesn't appear to load anything at the moment. Do I need to modify anything else? – Mario Parra Feb 19 '13 at 10:39
Hmm still doesn't load anything – Mario Parra Feb 19 '13 at 11:00
i have updated code.please try again. this time i am sure it will work. – Jaykesh Patel Feb 19 '13 at 11:07
The button links to javascript:void(0); but nothing pops up. I've updated the code on the site if you'd like to look at it. Thanks again – Mario Parra Feb 19 '13 at 11:14
where is the link so look on it? i have tested this code and it working for me. is there any javascript error showing on your console? – Jaykesh Patel Feb 19 '13 at 11:17
The button displays on every post at http://www.xeasycorex.net. I don't receive any errors when saving the code – Mario Parra Feb 19 '13 at 11:22
i have also added sample demo on jsfiddle. you are using jquery 1.5.1. please try with jquery 1.7.2. – Jaykesh Patel Feb 19 '13 at 11:31
The Fiddle works perfectly but even after changing to 1.7.2, it doesn't load anything. I'm using both scripts and calling them with "

" – Mario Parra Feb 19 '13 at 11:42
you have included javascript 1.4.2 inside script tag. and please remove javascipt 1.4.2 and check only with 1.7.2. and also delete var $jq = jQuery.noConflict(); this line. – Jaykesh Patel Feb 19 '13 at 11:46
I have another script that requires 1.4.2. The noConflict line allows me to use 1.4.2 and a newer version. By default it should use the newer one as 1.4.2 is called with $jq – Mario Parra Feb 19 '13 at 11:53
you have included jquery 1.4.2 script inside another script thats why is not working. – Jaykesh Patel Feb 19 '13 at 11:57
Is there a different way to call the pop-up window? This function loaded a pop-up window, but didn't link to Tumblr correctly: http://stackoverflow.com/a/4811108/2086597 – Mario Parra Feb 19 '13 at 11:58
please remove first script line in your code. your are include script inside script. – Jaykesh Patel Feb 19 '13 at 12:01
I'm getting confused because if I remove the outer script lines, Blogger won't save it. This is what I have: http://pastebin.com/3VEWEbc9. What do I need to edit? Thank you – Mario Parra Feb 19 '13 at 12:07
I commented out the JQuery 1.4.2 code and it still doesn't load – Mario Parra Feb 19 '13 at 14:40

score 0 · Answer 2 · answered Feb 19 '13 at 10:23

0

Use javascript window.open() function

$('#buttonID').click(function() {
  myWindow=window.open('','','width=200,height=100');  
  myWindow.document.write("<p>This is 'myWindow'</p>");  
  myWindow.focus();  
});

Syntax:

window.open (URL, windowName[, windowFeatures])

eg. window.open ("http://jsc.simfatic-solutions.com", "mywindow","status=1,toolbar=1");

answered Feb 19 '13 at 10:23

asifsid88

4,631
20
30

Could you please explain how I would implement this into my original code? I tried adjusting it but I don't think the syntax was correct – Mario Parra Feb 19 '13 at 13:12
I'm trying to use a simpler solution similar to this, but I'm still having issues http://jsfiddle.net/e6NAw/4/ – Mario Parra Feb 20 '13 at 00:20

Pop-up window in JavaScript

2 Answers2