abidibo.net

Just Open Source

moopopup demo page

Welcome to the moopopup demo page!
Let's take a look at the examples provided, notice that the window aspect be easily styled through css!

First example

Let's create a window not draggable, not resizable, with a custom content and shown at the coordinates (300px, 200px) respect to the body. 

var mp_instance = new moopopup({
    draggable: false,
    resizable: false,
    top_left_x: 500,
    top_left_y: 200,
    title: 'My first example title',
    text: "<p>Lol, I'm your content sir. Go and be antagonist fy</p>"
});
mp_instance.display();

run javascript

Second example

Let's create a window draggable, resizable, with no overlay which may open another window to play with the focus

var mp_instance = new moopopup({
    overlay: false,
    title: 'My second example title',
    html_node: 'mynode'
});
mp_instance.display();

the html node with id mynode (I've put it after the code, clearly with style display none):

<div id="mynode" style="display:none">
This is the content of the first window, and now follows a link which opens another window: <span class="link" onclick="var mp = new moopopup({overlay: false, title: 'Fuck yeah', text:'Italian politicians go home!', top_left_x: 100});mp.display();">link</span>
</div>

run javascript

Third example

Let's create a window showing my home page using an ajax request. Well of course some css are missing and also some other functionalities because my home page is a complete document, but take it as an example, actually when using this functionality the ajax request calls a method output and not the whole document.
The window width is 800px, its content height is maximum 600px height and is draggable and not resizable.

var mp_instance = new moopopup({
    title: 'My home page',
    width: 800,
    resizable: false,
    max_body_height: 600,    
    url: 'http://www.abidibo.net'
});
mp_instance.display();

run javascript

project page documentation download

blog comments powered by Disqus