Search code examples
jqueryhtmlcolorbox

display the content only in colorbox

I want to display the content only in colorbox and want to disappear the content after closed the colorbox. If I add display:none css to the '.ajax' content doesn't display in colorbox. If add removed display the content after closed the popup. I want to disappear the content after closed the popup

Fiddle 

<div class="ajax" >
   <img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
   <p>Hello, world!</p>
</div>

$(document).ready(function(){
    $.colorbox({inline:true, href:".ajax"});
});
Solution

  • You can use the onClose function that colorbox provided.

    onClosed: function() {
  $('.ajax').hide()
}

    full code:

    $(document).ready(function() {
  $.colorbox({
    inline: true,
    href: ".ajax",
    onClosed: function() {
      $('.ajax').hide()

    }
  });
});