JQuery Float Dialog v1.0
Easy PopUp
Easy PopUp
Code:
$(Element).floatdialog(dialog id, options {backgroundcolor, speed, event, effect, move, closeClass} )
To Ses the Demo: http://www.expbuilder.com/testpages/floatdialog/
Explain:
Demo 1 – Default use
HTML Code:
Code:
<a id="demo1" href="javascript :void(0);">Clicking Here</a>
<div id="dialog1">
<a href="javascript :void(0);">X</a>
<h1>Demo1 - Default use</h1>
<h2>This is a demo of the JQuery Float Dialog v1.0</h2>
<div>
this is the default use, you can do this demo by your self !
<b><a href="#demo1viewsource">Check demo1 view Source</a></b>
</div>
</div>
Javascipt Code:
Code:
<script>
$("#demo1").floatdialog("dialog1");
</script>
Demo 2 – Options
[ default - down - up - left - right - slidedown ]
HTML Code:
Code:
<a id="demo2" href="javascript :void(0);">Slide down</a>
<div id="dialog2">
<a href="javascript :void(0);">X</a>
<h1>Demo2 - Options - slide Down</h1>
<h2>This is a demo of the JQuery Float Dialog v1.0</h2>
<div>
you can make the box is slide down .. also can make it slide up, left and right
<b><a href="#demo2viewsource">Check demo2 view Source</a></b>
</div>
</div>
Javascipt Code
Code:
<script>
$("#demo2").floatdialog("dialog2", {move: 'down'});
</script>
[ true - false ]
Code:
<script>
$("#demo3").floatdialog("dialog3", {effect: false});
</script>
[ slow - fast - number ]
Code:
<script>
$("#demo4").floatdialog("dialog4", {speed: 'fast'});
</script>
[ click - mouseover ...ect ]
Code:
<script>
$("#demo4").floatdialog("dialog4", {speed: 'fast'});
</script>
[ color ]
Code:
<script>
$("#demo6").floatdialog("dialog6", {backgroundcolor: 'red'});
</script>
Code:
<script>
$("#demo6").floatdialog("dialog6", {backgroundcolor: '#CC0033'});
</script>
[ Dialog Close button class ]
Default: closebutton
Code:
<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);">X</a>
<h1>Demo2 - Options - Close button class</h1>
<h2>This is a demo of the JQuery Float Dialog v1.0</h2>
<div>
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:
Code:
<style>
.disable_masking
{
z-index: 6001;
position: absolute;
display: none;
}
.closebutton
{
float: right;
text-decoration: none;
}
</style>
2- Import files:
Code:
<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:
Code:
<a id="linkid" href="javascript :void(0);">Clicking Here</a>
<div id="dialogid">
<a href="javascript:void(0);">X</a>
<h1>DIALOG DATA HERE !</h1>
</div>
<script>
$("#linkid").floatdialog("dialogid");
</script>
===========================
Powered by: Ahmed Elkadrey – Expbuilder.com
