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

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));