A Simple flexible customizable jquery popup dialogbox plugin.
Plugin Methods
selector.showpopup(settings); // to create(show) popup dialog box
selector.closepopup(id); // to close specific popup dialog box
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
}
}
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>