ExpBuilder Float Dialog v2.0Easy PopUp

Author: Ahmed Elkadery
 

    


$(Element).floatdialog(dialog id, options {backgroundcolor, speed, event, effect, move, closeClass} )
X

Load Event with sound effect - sample demo

This is a sample demo of the ExpBuilder Float Dialog v2.0

This is the Load Event with sound effect, It appeare when page is start  Check "sample demo" view Source
 

Sample Demo - view source

HTML Code: 

    
<div id="loaddialog">

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

    <h1>Load Event with sound effect - sample demo</h1>

    <h2>This is a sample demo of the ExpBuilder Float Dialog v2.0</h2>

    <div class="data">

       This is the Load Event with sound effect, It appeare when page is start


       &nbsp;<b><a href="#sampledemoviewsource" class="closebutton">Check "sample demo" view Source</a></b>

    </div>

</div>

Javascipt Code: 

    
$(document).floatdialog("loaddialog", {event: "load", sound: true});

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 ExpBuilder Float Dialog v2.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 ExpBuilder Float Dialog v2.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 ExpBuilder Float Dialog v2.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 ExpBuilder Float Dialog v2.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 ExpBuilder Float Dialog v2.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 ExpBuilder Float Dialog v2.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 ExpBuilder Float Dialog v2.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 ExpBuilder Float Dialog v2.0

change the backgound color 

    


<script>

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

</script>
OR 

    


<script>

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

</script>
 

6- closeClass

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

Demo2 - Options - Close button class

This is a demo of the ExpBuilder Float Dialog v2.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"><img src="close.gif" width="20" height="20"></a>



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

    <h2>This is a demo of the ExpBuilder Float Dialog v2.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>
 
 

7- load (load on start up)


HTML Code: 

    
<div id="demoload">

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

    <h1>Demo2 - Options - Load Event - load on start up</h1>

    <h2>This is a demo of the ExpBuilder Float Dialog v2.0 - load event</h2>

    <div class="data">

       This is the float dialog Load Event, It appeare when page is start

    </div>

</div>

Javascipt Code: 

    
<script>
    $(document).floatdialog("demoload", {event: "load"});
</script>
 
 

8- sound (Play Sound when dialog started)

[ true - false]
click here to test the sound when started
X

Demo2 - Options - sound effect

This is a demo of ExpBuilder Float Dialog v2.0

Play sound when the dialog is shown

HTML Code: 

    
<a id="demosound" href="javascript:void(0);">click here to test the sound when started</a>

<div id="demosound_dialog">

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

    <h1>Demo2 - Options - sound effect</h1>

    <h2>This is a demo of ExpBuilder Float Dialog v2.0</h2>

    <div class="data">

       Play sound when the dialog is shown

    </div>

</div>

Javascipt Code: 

    
<script>
    $("#demosound").floatdialog("demosound_dialog", {sound: true});
</script>
 
 

9- soundsrc (The sound path)

Default: [audio/sound01.mp3]
click here to test the sound when started with another sound file (sound02.mp3)
X

Demo2 - Options - sound Path

This is a demo of ExpBuilder Float Dialog v2.0

Play sound with Set Sound file Path (audio/sound02.mp3)

HTML Code: 

    
<a id="soundsrcdemo" href="javascript:void(0);">click here to test the sound when started</a>

<div id="soundsrcdemo_dialog">

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

    <h1>Demo2 - Options - sound Path</h1>

    <h2>This is a demo of ExpBuilder Float Dialog v2.0</h2>

    <div class="data">

      Play sound with Set Sound file Path (audio/sound02.mp3)

    </div>

</div>

Javascipt Code: 

    
<script>
    $("#soundsrcdemo").floatdialog("soundsrcdemo_dialog", {sound: true, soundsrc: "audio/sound02.mp3"});
</script>

_________________________________
 

Download ExpBuilder Float Dialog v2.0

 
1- Download jQuery JavaScript Library

- jquery-1.3.2.min.js

2- JQuery ExpBuilder Float Dialog v2.0

- expbuilder-floatdialog-v.2.0.zip

ExpBuilder Float Dialog v2.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>