As its name shows that it’s a easy pop up because it's a single javascript file to create pop up. Nither css nor any other files is needed. It's a very light weight and easy to use and customize.
Usage & Installation: Put the easypop.js file in your javascript folder and include it on your file.
Add this just before your closing
body tag, after you've included jQuery:
<script src="/your/js/folder/easypopup.js"></script>
Note : Don’t forgot to include Jquery.js library at the top of your files.
Property of easypop-up:
1) - It’s a light weight.
2) - Easy to customize.
3) -Responsive pop up. So you can use not only in web application but also in mobile application as well.
Options:
Option
|
Value
|
popWidth
|
Set the maximum width of pop up
|
popHeight
|
Set the maximum height of pop up
|
topFrom
|
Set the position of pop up from top
|
popupTitle
|
Set the title of pop up , Like: "This is the demo pop up"
|
popupBorderColor
|
Set the border color of pop up, Like: Red- #e2072e,Blue- #0000a0
|
titleBackColor
|
Set the title background color, Like: Red- #e2072e,Blue- #0000a0
|
popBackColor
|
Set the pop up background color, Like: Red- #e2072e,Blue- #0000a0
|
beforeClose
|
Set the function which you want to call before closing popup
|
Function To create pop up:
You need to call a function between document.ready function in javascript file like below-
$(document).ready(function(){
EasyPopUp.create();
});
Above function will simply create a pop up with blank content. If you want add content in your pop then follow the below instruction :
$(document).ready(function(){
EasyPopUp.create();
$('#EasyPopUp_Popup_Main div:first').html("Demo text from php programming solutions");
});
Demo Of pop up: Your pop up will be looking like below.
Download: Click Here To Download the easy pop up library.
If You Like This Post Please Don't Forgot To Leave A comment.
Chears :)
Happy Coding ...