-
Notifications
You must be signed in to change notification settings - Fork 0
ajayhada/SimpleDialog
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A Simple flexible customizable jquery popup dialogbox plugin.
*************
## Plugin Methods
************
1. selector.showpopup(settings); // to create(show) popup dialog box
2. selector.closepopup(id); // to close specific popup dialog box
3. selector.closeAllpopup(); // to close all popup diabog box instances
## Settings parameter description
Settings{
left: 100, // left position of dialog box''
top: 100, // top position of dialog box
hideinterval: 0, // can provide auto hide interval
hideOnClick: false, // set true to hide popup on click
draggable: true, // set this flag true to make dialog draggable
draggableContainer: "document", // set dialog draggable boundaries , default is document, you can pass $("#divid")
enableclose:true, // set true to show close link
closeIcon:"close_icon.jpg", // set close icon
ismodal: true, // create model dialog
overlayStyle:{
opacity: 0.1, // set opacity for overlay
background:'black', // set overlay div color
extraCSS:'' // set css properites to customize overlay css
},
popupStyle:{
border: 3, // border width of dialog box
bordercolor: '#000', // border color of dialog box
borderradius: 10, // border radius of dialog // do not work in IE
background:'#dddddd', // dialogbox background color.
extraCSS:'' // you can provide extra css properties to customize popup window
}
}
***
## How to use ?
### Include libraries
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script type="text/javascript" src="https://github.com/downloads/ajayhada/SimpleDialog/SimpleDialog-2.0.js"></script>
***
### Write a popup div
<div class="Hello" style="display:none;">
<h1>Hello guys</h1>
<b>Hello guys</b>
<b>Hello guys</b>
</div>
### write show hide methods
function closePopup(){
$('.Hello').closeAllpopup();
}
function show(){
$('.Hello').showpopup({enableclose:true,closeIcon:"close_icon.gif",ismodal:true,overlayStyle:{background:"RED"}});
}
### Create an event to show the popup
<button onclick="show();">Click to open popup box</button>
***
About
Simple dialog box jquery plugin
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published