Show window inside any web page

Hi,

I want to implement a utility for myself that should provide a small console where I can execute random JS in any browser (much like Firebug's console - I don't reinvent the wheel, I just want to do something I need and just have fun doing it).

So the usage use-case would be this:

Click a bookmarklet from any browser.
It shows dialog (much like jQuery dialog or similar) with text area and couple of buttons.
User enter a JS in the text area.
User clicks a button and it gets executed.
User closes the dialog.

I don't know how I can display nice dialog on any web page (Gmail, news, static pages, whatever).

I think it would be possible to create a jQuery dialog (or other library) and show it on the page. But it could lead to a lot of issues as the dialog might conflict with page CSS, JS and so on.

So the question is how to display a custom dialog on any web page from all (major) browsers using JavaScript.

The NOTES: I don't want to have a popup window. IFRAME would be ok but we cannot use it as the web page's DOCTYPE might not support it.

Thanks,
Dmitriy.

I know what bookmarlet is. The main question is the window. Yes, we can use DIV for sure, but how can you create the div without knowing the DOCTYPE, and generally having no knowledge about the content of the page? If you will add a DIV and try to attach a window to it - positioning of the window can be wrong because of other CSS applied on the page.

Dmytrii Nagirniak 2009-12-20 23:16:10

what? what got DIV has to do with DOCTYPE? if you are not talking about HTML 2.0, there is DIV in all the latest versions.re CSS - you got javascript at your service, so just get screen/visible width and height and put it in the centre. use attribute `!imporant` to override original document CSS

dusoft 2009-12-21 00:24:25

DIV has nothing to do with DCOTYPE, sure. Sorry for confusion: I meant to say that different rendering modes and different DOCTYPEs can affect where and how the DIV will appear. So it is hard to preserve the CSS of the dialog will be displayed on the page. So maybe there are other approaches known.

Dmytrii Nagirniak 2009-12-21 02:36:10

ok, no problem. i am sure that you can use JS to get dimensions of the screen and position DIV via JS/CSS. lite-box functionality is what you should take care of. check:http://www.dolem.com/lytebox/how it positions the DIV/images and copy the necessary code from there.

dusoft 2009-12-21 13:38:05

ansaurus

tags:

views:

answers:

Show window inside any web page

related questions