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 to load the page completely frameless? Like a jquery modal version of it which I don't think is possible from within the page, overlaying itself so to speak.

Is there a way to maybe throw the page out in document.write commands and put a js version of it out there instead? Or some other way?

Amazon Example:

Create a bookmarklet using the following to code to get a clearer example of what I mean - doesn't matter if you don't have an account you'll see the effect.

javascript:(function(){var%20w=window,l=w.location,d=w.document,s=d.createElement('script'),e=encodeURIComponent,o='object',n='AUWLBookenGB',u='https://www.amazon.co.uk/wishlist/add',r='readyState',T=setTimeout,a='setAttribute',g=function(){d[r]&&d[r]!='complete'?T(g,200):!w[n]?(s[a]('charset','UTF-8'),s[a]('src',u+'.js?loc='+e(l)+'&b='+n),d.body.appendChild(s),f()):f()},f=function(){!w[n]?T(f,200):w[n].showPopover()};typeof%20s!=o?l.href=u+'?u='+e(l)+'&t='+e(d.title):g()}())

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

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