jQuery popItUp Plugin Examples

Change overlay color and its opacity

              $('#showPopupBtn').click(function(){
                $('.popit-wrapper').popitup({
                  overlayColor: "#4a5",
                  overlayOpacity: "0.2"
                });
              });
            

Popup will close if clicked outside

              $('#showPopupBtn').click(function(){
                $('.popit-wrapper').popitup({
                  autoClose: true
                });
              });
            

Give animation like slideUp, slideDown, slideLeft, slideRight on opening and closing of modal

              $('#showPopupBtn').click(function(){
                $('.popit-wrapper').popitup({
                  animation: "slideLeft"
                });
              });
            

Change the text and background color of elements inside your popup.

              $('#showPopupBtn').click(function(){
                $('.popit-wrapper').popitup({
                  colorChange: {
                    color: "#fff",
                    background: "#000"
                  },
                  overlayColor: "#fff"
                });
              });
            

Stop the Modal to follow the center of the screen as you scrolls page up and down.

              $('#showPopupBtn').click(function(){
                $('.popit-wrapper').popitup({
                  chase: false
                });
              });
            

Set position of modal in viewport - give offset values of x and y

              $('#showPopupBtn').click(function(){
                $('.popit-wrapper').popitup({
                  modalPosition: [200, 300]
                });
              });
            

Call an AJAX request inside the popup. Note :- It must need containerToLoad option to load the requested ajax data.

              $('#showPopupBtn').click(function(){
                $('.popit-wrapper').popitup({
                  containerToLoad: ".content-wrapper",
                  urlToLoad: "ajax-test.html"
                });
              });
            

Load an image to your popup. Need to specify containerToLoad option.

              $('#showPopupBtn').click(function(){
                $('.popit-wrapper').popitup({
                  containerToLoad: ".content-wrapper",
                  imageToLoad: "http://www.danielyeow.com/wp-content/uploads/cricket_ball.jpg"
                });
              });
            

Callback functions

Functions trigger when their corresponding events happen - like open and close.

              $('#showPopupBtn').click(function(){
                $('.popit-wrapper').popitup({
                  
                  ...,
                  onOpenModal : function(){
                    /** Your onOpen code goes here... */
                  },
                  onCloseModal : function(){
                    /** Your onClose code goes here... */
                  }
                });
              });