Thursday, August 20, 2015

Create A Pop Up Using Easy Pop Up

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. 


Download:   Click Here To Download the easy pop up library.

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 ...


Related Posts Plugin for WordPress, Blogger...