JQuery Float Dialog v1.0Easy PopUp

Author: Ahmed Elkadery

Click here To Get the Version 2.0 of Float Dialog with new futures

 

    


$(Element).floatdialog(dialog id, options {backgroundcolor, speed, event, effect, move, closeClass} )
You can click here to see what JQuery Float Dialog can do !!

tested and working with all browsers

 

Demo

 

Demo 1 - Default use

You can test the default use of Float Dialog by Clicking Here
X

Demo1 - Default use

This is a demo of the JQuery Float Dialog v1.0

this is the default use, you can do this demo by your self !  Check demo1 view Source
 

Demo 1 - view source

HTML Code: 

    
<a id="demo1" href="javascript:void(0);">Clicking Here</a>

<div id="dialog1">

    <a href="javascript:void(0);" class="closebutton">X</a>



    <h1>Demo1 - Default use</h1>

    <h2>This is a demo of the JQuery Float Dialog v1.0</h2>

    <div class="data">

       this is the default use, you can do this demo by your self !



       &nbsp;<b><a href="#demo1viewsource" class="closebutton">Check demo1 view Source</a></b>



    </div>

</div>

Javascipt Code: 

    


<script>

    $("#demo1").floatdialog("dialog1");

</script>
 

Demo 2 - Options

here you can make some effects on Float Dialog  

1- move

[ default - down - up - left - right - slidedown ]

Slide down
X

Demo2 - Options - slide Down

This is a demo of the JQuery Float Dialog v1.0

you can make the box is slide down .. also can make it slide up, left and right  Check demo2 view Source
 

Demo 2 - view source

HTML Code: 

    
<a id="demo2" href="javascript:void(0);">Slide down</a>

<div id="dialog2">

    <a href="javascript:void(0);" class="closebutton">X</a>



    <h1>Demo2 - Options - slide Down</h1>

    <h2>This is a demo of the JQuery Float Dialog v1.0</h2>

    <div class="data">

       you can make the box is slide down .. also can make it slide up, left and right



       &nbsp;<b><a href="#demo2viewsource" class="closebutton">Check demo2 view Source</a></b>



    </div>

</div>

Javascipt Code: 

    


<script>

    $("#demo2").floatdialog("dialog2", {move: 'down'});

</script>
See also:
slide up
slide left
slide right
slide slidedown
 

2- effect

[ true - false ]

Stop effect using effect: false
X

Demo2 - Options - stop effect

This is a demo of the JQuery Float Dialog v1.0

here show dialog without effect 

    


<script>

    $("#demo3").floatdialog("dialog3", {effect: false});

</script>
 

3- speed

[ slow - fast - number ]

make effect speed fast
X

Demo2 - Options - Speed Fast

This is a demo of the JQuery Float Dialog v1.0

make effect speed fast 

    


<script>

    $("#demo4").floatdialog("dialog4", {speed: 'fast'});

</script>
 

4- event

[ click - mouseover ...ect ]

make dialog showen when the mouse move over the link
X

Demo2 - Options - make event mouseover

This is a demo of the JQuery Float Dialog v1.0

make dialog showen when the mouse move over the link 

    


<script>

    $("#demo4").floatdialog("dialog4", {speed: 'fast'});

</script>
 

5- backgroundcolor

[ color ]

change the backgound color
X

Demo2 - Options - backgound color

This is a demo of the JQuery Float Dialog v1.0

change the backgound color 

    


<script>

    $("#demo6").floatdialog("dialog6", {backgroundcolor: 'red'});

</script>
OR 

    


<script>

    $("#demo6").floatdialog("dialog6", {backgroundcolor: '#CC0033'});

</script>
 

6- closeClass

[ Dialog Close button class ]

Default: closebutton
You can change the close button class to what you want
X

Demo2 - Options - Close button class

This is a demo of the JQuery Float Dialog v1.0

You can change the close button class to what you want 

    
<a id="demo6" href="javascript:void(0);">You can change the close button class to what you want</a>

<div id="dialog6">

    <a href="javascript:void(0);" class="myclosebutton">X</a>



    <h1>Demo2 - Options - Close button class</h1>

    <h2>This is a demo of the JQuery Float Dialog v1.0</h2>

    <div class="data">

       You can change the close button class to what you want

    </div>



</div>

<script>

    $("#demo6").floatdialog("dialog6", {closeClass: '.myclosebutton'});

</script>
 

Download JQuery Float Dialog v1.0

1- Download jQuery JavaScript Library

- jquery-1.3.2.min.js

2- JQuery Float Dialog v1.0

- jquery.floatdialog.zip

Download this demos

- jquery.floatdialog.package.zip

JQuery Float Dialog v1.0 SetUp

A. Head Tag

1- css code:


    
<style>

.disable_masking

{

    z-index: 6001;

    position: absolute;

    display: none;

}

.closebutton

{

    float: right;

    text-decoration: none;

}

</style>

2- Import files:


    
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="jquery.floatdialog.js"></script>

B. Body Tag

1- HTML & JavaScript Code:


    
<a id="linkid" href="javascript:void(0);">Clicking Here</a>

<div id="dialogid">

    <a href="javascript:void(0);" class="closebutton">X</a>



    <h1>DIALOG DATA HERE !</h1>

</div>

<script>

    $("#linkid").floatdialog("dialogid");

</script>