Load a modal window from a bookmarklet (like the Amazon wishlist bookmarklet)

Question

I am using a bookmarklet to load an html page which all works great, but, doesn\'t look so hot due to browsers generally being ugly around the outside!

Is there a way t

Answer 1

Upon looking at it more, and inspecting the bookmarklet that appears, here is the overall code structure:

    javascript: (function() { 
       var w = window, 
       l = w.location, 
       d = w.document, 
       s = d.createElement('script'), 
       e = encodeURIComponent, 
       x = 'undefined', 
       u = 'http://www.amazon.co.uk/wishlist/add'; 
       if (typeof s != 'object') l.href = u + '?u=' + e(l) + '&t=' + e(d.title); 
       function g() { 
          if (d.readyState && d.readyState != 'complete') { 
             setTimeout(g, 200); 
          } else { 
             // testing if AUWLBook is undefined (AUWL is their global object for it)
             // If it is, they add the <script> tag for their JS (variable u)
             if (typeof AUWLBook == x) s.setAttribute('src', u + '.js?loc=' + e(l)), 
             d.body.appendChild(s); 
             function f() { 
                // they keep looping through until the Object is finally created
                // Then they call the showPopover function which initializes everything
                // Builds all the HTML (with JS, etc)
                (typeof AUWLBook == x) ? setTimeout(f, 200) : AUWLBook.showPopover(); 
             } 
             f(); 
          } 
       } 
       g(); 
    }())

As you can see an anonymous function is being created, and the jist of what is happening here is that they are creating a script element s = d.createElement('script'), into your current document which then loads the rest of the bookmarklet.

// since their global object will be undefined at first they create it
if (typeof AUWLBook == x) s.setAttribute('src', u + '.js?loc=' + e(l)), 
   d.body.appendChild(s); 

As for the string building for the href... it looks like l.href = u + '?u=' + e(l) + '&t=' + e(d.title); is for their internal reference so they know what page/etc you came from, i'm assuming they are building what the Wish list item is from the Title of the page (that's what it looks like at least).

You can see their entire JS code here, they have a whole lot going on: Amazong Bookmarklet JS Link

But as you can see they build the entire popup & the DOMelements straight from Javascript:

  // (part of the AUWLBook object)
  showPopover : function(args){
  // etc etc...

  // open in window if it can't create a popover
  if (!this.canDisplayPopover()) {
    window.location.href = 'https://www.amazon.co.uk/wishlist/add' + '?u=' + encodeURIComponent(window.location) + '&t=' + encodeURIComponent(document.title);
    return;
  }

  // Then comes just an insane amount of lines of creating all the elements
  floater = shmCreateElement('table', { width: bookmarkletWidth, border: '0', id: 'auwlPopover' }, {position: 'absolute', zIndex: '999999999', width: bookmarkletWidth, tableLayout: 'auto', lineHeight: '100%', borderCollapse: 'collapse'});

shmCreateElement being their internal html creation function (i'd def suggest copying it)

     function shmCreateElement(tagName, props, styles, children) { ... }

So I guess basically you need to have whatever you want to appear completely coming from JS, have it injected into the current pages document DOM, and there you go.

Answer 2

Simplest, most light-weight solution would be to use window.open.

Something like the following will display a 600x250 window in the middle of the screen. Only the titlebar will show, which can show the title of the window.

Paste this in your browser's URL field to try it out:

javascript:(function()%7Bvar%20d=document;window.open('http://stackoverflow.com','_blank','width=600,height=250,left='+(screen.width/2-300)+',top='+(screen.height/2-125))%7D)();

Answer 3

javascript:(function()%20{if(typeof%20jQuery=='undefined'){var%20jqit=document.createElement('script');jqit.type='text/javascript';jqit.src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';document.getElementsByTagName('head')[0].appendChild(jqit);}%20_my_script=document.createElement('script');_my_script.type='text/javascript';_my_script.src='http://font-friend.googlecode.com/svn/trunk/font-friend.js';document.getElementsByTagName('head')[0].appendChild(_my_script);})();

That is the code for the "font-friend" bookmarklet, which creates a popup on a given site. You could just alter the code references to your individual needs, but should give a starting point.

here is the link to it http://somadesign.ca/projects/fontfriend/

Answer 4

If all you want is to show some html that you have on another page, you can do something like this:

var modal = document.createElement('iframe');
modal.setAttribute('src', 'http://codinghorror.com');
modal.setAttribute('scrolling', 'no'); // no scroll bars on the iframe please
modal.className = 'modal';
document.body.appendChild(modal);

With some basic styles:

.modal {
    border:0;            
    height:200px;
    position:fixed;
    right:20px;
    top:20px;
    width:200px;
    z-index:101;   
}​

Of course, you should load these styles from a remote host:

var c = document.createElement('link');
c.type = 'text/css';
c.rel = 'stylesheet';
c.href = '//example.com/main.css';
document.body.appendChild(c);

So your bookmarklet looks like: http://jsfiddle.net/radu/mTKHQ/. This is with the css hosted locally since I didn't bother uploading it anywhere. Now, this is very barebones and there is obviously a lot more you can do. First of all, you can write your own DOM instead of using an iFrame. You can add a close button, various events, etc. At that point, it would make sense to do what amazon did and use a script/stylesheet loader to load files from a remote host, like so:

(function (d) {
    var s = d.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = '//example.com/main.js';
    d.body.appendChild(s);
    var c = d.createElement('link');
    c.type = 'text/css';
    c.rel = 'stylesheet';
    c.href = '//example.com/main.css';
    d.body.appendChild(c);
}(document));

Prepend this with javascript:, and you've got your new bookmarklet:

javascript:(function(d){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='//example.com/main.js';d.body.appendChild(s);var c=d.createElement('link');c.type='text/css';c.rel='stylesheet';c.href='//example.com/main.css';d.body.appendChild(c);}(document));