Inpage Popup are most used JS for website developers. Here in this article I given full detailed code for popup using javascript. Many times we need to minimize and restore functionality for our in page pop-up. In This article I will show how to achieve the minimize and maximize and restore functionality with javascript.

minimize, restore, maximize and hide functionality with javascript

minimize, restore, maximize and hide functionality with javascript

I you want the minimize functionality for your in page pop-up use following code for minimize and restore button. Following code you can use for showing the minimize button on pop-up.

Note: Here for this example My in page popup div id name is “popup-container”. For using following example you should keep the main popup continer id name is “popup-container”.


<a id="dialog-minimize" href="#" onclick="minimize();" style="display: block;"><span>Min</span></a>

<a id="dialog-minimize-return" href="#" onclick="minimize_restore();" style="display:none;"><span>Min</span></a>

Use following javascript function in your document.

function minimize(){

 var main-containter = document.getElementById('popup-container');
 window.divh = main-containter.style.height;
 window.divw = main-containter.style.width;
 window.divtop = main-containter.style.top;
 window.divleft = main-containter.style.left;

 var hideminbutton = document.getElementById('dialog-minimize');
 hideminbutton.style.display = "none";

 var hideminbutton = document.getElementById('dialog-minimize-return');
 hideminbutton.style.display = "block";

 main-containter.style.position ="absolute";
 main-containter.style.left ="10px";
 main-containter.style.bottom ="0px";
 main-containter.style.marginBottom ="-100px";
 main-containter.style.top = "auto";
 /* css({position:"absolute", left:"10px", width: 250, height: 100, bottom:"-60px"});
 top: 389px; left: 381px; bottom: -60px;
 */
}

function minimize_restore(){
 var popup_element = document.getElementById('popup-container');
 popup_element.style.position ="absolute";
 popup_element.style.height = window.div_height;
 popup_element.style.width = window.div_width;
 popup_element.style.left = window.divleft;
 popup_element.style.top = window.divtop;

 var hideminbutton = document.getElementById('dialog-minimize');
 hideminbutton.style.display = "block";

 var hideminbutton = document.getElementById('dialog-minimize-return');
 hideminbutton.style.display = "none";
}

Above function will swap the minimize and restore button through javascript.

Using following function you can achieve the maximize and maximize restore functionality using the simple javascript. following code you need to use in your html for maximize button.


<a id="dialog-maximize" onclick="maximize();" href="#" style="display: block;"><span>Max</span></a>

<a id="dialog-maximize-return" onclick="maximize_restore();" href="#" style="display: none;"><span>Max</span></a>

following javascript code you need to use in your document.


function maximize_restore(){
 var popup_element = document.getElementById('popup-container');
 popup_element.style.position ="absolute";
 popup_element.style.left = window.divleft;
 popup_element.style.top = window.divtop;
 popup_element.style.height = window.div_height;
 popup_element.style.width = window.div_width;

 var hideminbutton = document.getElementById('dialog-maximize');
 hideminbutton.style.display = "block";

 var hideminbutton = document.getElementById('dialog-maximize-return');
 hideminbutton.style.display = "none";
}

function maximize(){

 var popup_element = document.getElementById('popup-container');
 window.div_height = popup_element.style.height;
 window.div_width = popup_element.style.width;
 window.divtop = popup_element.style.top;
 window.divleft = popup_element.style.left;

 var hideminbutton = document.getElementById('dialog-maximize');
 hideminbutton.style.display = "none";

 var hideminbutton = document.getElementById('dialog-maximize-return');
 hideminbutton.style.display = "block";

 var myWidth = 0, myHeight = 0;
 if( typeof( window.innerWidth ) == 'number' ) {
 //Non-IE
 myWidth = window.innerWidth;
 myHeight = window.innerHeight;
 } else if( document.documentElement &&
 ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 myWidth = document.documentElement.clientWidth;
 myHeight = document.documentElement.clientHeight;
 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
 //IE 4 compatible
 myWidth = document.body.clientWidth;
 myHeight = document.body.clientHeight;
 }
 myWidth = myWidth -25;
 myHeight = myHeight -20;
 var popup_element = document.getElementById('popup-container');
 popup_element.style.position ="absolute";
 popup_element.style.left ="10px";
 popup_element.style.height = myHeight +"px";
 popup_element.style.width = myWidth +"px";
 popup_element.style.top = "5px";
}

If you having any issue with this script please get back to me. Please write email to me on support@wordpressapi.com

If you need the more information about Javascript and Jquery then please refer the following articles.

wordpress and jquery conflicts – How to solve that
100+ jquery and CSS techniques and Tips and tutorials
jquery tips for wordpress theme developers
Fadein and Fadeout effect through javascript
minimize, restore, maximize and hide functionality with javascript without using jquery
Complete Javascript form Validation now easy ( Checkbox, Websites, Email, Maxlength)

Written by WPAPI

I am from India, Pune. I am WordPress and Drupal Architect and consultant. I worked on many technologies like Ruby on Rails, Flex, PHP, jQuery etc... Senior Technical Lead at Smartsourcing Global Pvt Ltd in Princeton, NJ, USA. I contributed to many wordpress plugins and Drupal Modules. I contributed to Drupal core also. Connect to purab on LinkedIn or Follow @purab on Twitter or Follow me on or Write Mail to purabdk@gmail.com or Chat with me on Skype : purabdk

This article has 41 comments

  1. Pingback: Tweets that mention minimize, restore, maximize and hide functionality with javascript without using jquery | Developer Code book -- Topsy.com

  2. Diana Reply

    you forgot to publish the minimize function.
    The maximize works fine with a simple div but I tried to use it with a jquery ui dialog and it doesn’t work. How can I do it so it looks like the picture ?

  3. Tawanna Maxim Reply

    Wow, superb blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is great, as well as the content!

  4. Ngan Lindler Reply

    Please let me know if you’re looking for a article author for your site. You have some really great articles and I feel I would be a good asset. If you ever want to take some of the load off, I’d love to write some material for your blog in exchange for a link back to mine. Please blast me an e-mail if interested. Thank you!

  5. Chung Alberda Reply

    I am really enjoying the theme/design of your blog. Do you ever run into any internet browser compatibility problems? A small number of my blog audience have complained about my site not operating correctly in Explorer but looks great in Safari. Do you have any suggestions to help fix this issue?

  6. katalog stron Reply

    This is truly good content and enlightening weblog, I praise what you’ve carried out right here, along with sharing excellent information with great tips and concepts, I’m really pleased to submit my comment on this weblog, many thank you’s towards the author.

  7. Elinore Artiles Reply

    I am really loving the theme/design of your weblog. Do you ever run into any browser compatibility problems? A few of my blog audience have complained about my website not operating correctly in Explorer but looks great in Safari. Do you have any ideas to help fix this issue?

  8. Ellie Bahl Reply

    I want you to know, your writing goes to the nerve of the issue. Your pellucidity leaves me wanting to know more. I am going to immediately grab your feed to keep up to date with your site. Sounding Out thanks is simply my little way of saying what a masterpiece for a fantastic resource. Let In my dearest wishes for your future post.

  9. Flagyl Reply

    I was wondering if you ever considered changing the layout of your blog? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having one or two images. Maybe you could space it out better?

  10. Donnetta Woelfle Reply

    After study just a few of the blog posts in your web site now, and I truly like your means of blogging. I bookmarked it to my bookmark web site checklist and will probably be checking back soon. Pls try my site as effectively and let me know what you think.

  11. Karol Strobeck Reply

    Wow! Your post has a ton comment posts. How did you get so many bloggers to look at your article I’m envious! I’m still studying all about article writing on the net. I’m going to view pages on your site to get a better understanding how to get more visable. Thanks!

  12. Zdjecia slubne Reply

    magnificent post, very informative. I’m wondering why the opposite specialists of this sector don’t realize this. You should continue your writing. I’m confident, you’ve a great readers’ base already!

  13. Jeff Olive Reply

    Nice post! You truly have a wonderful way of writing which I find captivating! I will definitely be bookmarking you and returning to your blog. In fact, your post reminded me about a strange thing that happened to me the other day. I’ll tell you about that later…

  14. Dorinda Navar Reply

    Intriguing post. I have been searching for some good resources for solar panels and discovered your blog. Planning to bookmark this one!

  15. Anibal Mehr Reply

    I REALLY liked your post and blog! It took me a minute bit to find your site…but I bookmarked it. Would you mind if I posted a link back to your post?

  16. Michel Mayen Reply

    Hello, this is my first time i visit here. I found so many interesting in your blog especially on how to determine the topic. keep up the good work.

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>