File: javascript/jquery_popup.md

Create you owner popup with jQuery

HTML:

		<a href="/test/popup/" id="popup_link" title="">Show popup</a>

_css:_

#popup_content {
	width: 100%; height: 100%; position: fixed; top: 0; left: 0;
	z-index: 1000;
	background-color: transparent;
	background-color: rgba(0, 0, 0, 0.7);
}
#popup_wrapper {margin: 0 auto; text-align: center}
.loading_div {
    width: 100%; height: 13px;
    background: transparent url('thickbox_loading.gif') no-repeat center center;
  }

_javascript:_

	var popup_width = '90%';
	var pop_is_show = false;
  $('#popup_link').click(function(e) {
    e.preventDefault();
    $('body').append('<div id="popup_content"><div id="popup_wrapper"></div></div>');
    $('#popup_wrapper').html('<div class="loading_div"></div>').center(true);
    $.get($(this).attr('href'), function(content) {
			pop_is_show = true;
      $('#popup_wrapper').html(content).center(true);
      $('div.searchContainer').width(popup_width);
    });
  });
  
  function popup_close() {
    $('#popup_content').remove();
  }
  
	document.body.addEventListener('touchstart', function(e){
    if (pop_is_show && $( e.target ).attr('id') == 'popup_content') {
      popup_close(); pop_is_show = false;
    }
        
 }, false);
 
 $( document ).on( "click", function( event ) {
  if ($( event.target ).attr('id') == 'popup_content' && pop_is_show) {
    popup_close(); pop_is_show = false;
  }
});
function is_landscape() {
    return (window.orientation === 90 || window.orientation === -90);
}

$(document).ready(function() {
  popup_width = ( is_landscape() ? $( window ).height() : $( window ).width() ) * 0.9;
    /*$(window).on('orientationchange', function(event) {
        if ( is_landscape() && pop_is_show ) {
          var width = $( window ).height() * 0.9;
          $('div.searchContainer').width(width);
        }
    });*/
});