diff --git a/css/popup.css b/css/popup.css new file mode 100644 index 0000000..074f82f --- /dev/null +++ b/css/popup.css @@ -0,0 +1,48 @@ +#layer_popup { + + z-index:50000; + background-color:rgba(0,0,0,0.4); + /*opacity:0.5;*/ + position:absolute; + width:100%; + height:100%; + overflow:auto; + + +} + +#container_popup { + + z-index:50001; + overflow:auto; + /* border: solid #fbfbfb 4px;*/ + position:absolute; + overflow:visible; + width:100%; + height:100%; + display: flex; + align-items: center; + justify-content: center; + +} + +.content_popup { + + /*position:absolute; + top: 0; + left: 50%; + transform: translate(-50%, 0%);*/ +/* position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%);*/ + z-index:50005; + margin-top:0px; + box-sizing: border-box; + -webkit-box-sizing:border-box; + -moz-box-sizing: border-box; + opacity:1; + -webkit-box-shadow: 0px 0px 160px 0px rgba(80,80,80,1); + -moz-box-shadow: 0px 0px 160px 0px rgba(80,80,80,1); + box-shadow: 0px 0px 160px 0px rgba(80,80,80,1); +} diff --git a/popup.js b/popup.js new file mode 100644 index 0000000..987b7a7 --- /dev/null +++ b/popup.js @@ -0,0 +1,250 @@ +$=jQuery; + +(function( $ ){ + + $.fn.popUp = function (popup, width, pre_callback, post_callback, options) { + + var popup_container='body'; + + var after_show=false; + + var after_click=false; + + if(options!=undefined) + { + + if(options.hasOwnProperty("popup_container")) + { + + popup_container=options.popup_container; + + } + + if(options.hasOwnProperty("after_show")) + { + + after_show=options.after_show; + + } + + if(options.hasOwnProperty("after_click")) + { + + after_click=options.after_click; + + } + + + } + + //If scroll put in center scroll, if not scroll, put in simple center + + $(popup).hide(); + + $(this).on('click', function (e) { + + if(pre_callback!=undefined) + { + + r=pre_callback(popup, this); + + if(r!=undefined) + { + + if(r===false) + { + + return false; + + } + + } + + } + + body_height=$("body").height(); + + $('#layer_popup').height(body_height); + + //$('body').prepend('
'); + + $('body').prepend('
'); + + $('body').css('overflow', 'hidden'); + + //$('body').height(); + + + $(popup_container).prepend('
'); + + $(popup).appendTo('.content_popup'); + + if(width==undefined) + { + + $('.content_popup').width('80%'); + + } + else + { + + $('.content_popup').width(width); + + } + + popup_height=parseInt($(popup).height())+40; + + window_height=$(window).height(); + + $('.content_popup').wrap('
'); + + $('#container_popup').css('height', window_height); + + $('#container_popup').addClass('click_popup'); + $('#layer_popup').addClass('click_popup'); + + pos_scroll=$(document).scrollTop(); + + new_top=Math.round((window_height-popup_height)/2)+pos_scroll; + + $('#container_popup').css('top', pos_scroll); + + if (popup_height>window_height) + { + + + /*$('.content_popup').css('top', 0); + + $('.content_popup').css('transform', 'translate(-50%, 0%)');*/ + + $('.content_popup').css('margin-top', 0); + + + } + + $('#error_insert_name').html('') + /*pos=$(document).scrollTop(); + + $('.content_popup').css('top', pos); + + popup_height=$(popup).height();*/ + + /* + $("body").wrapInner($('
').css({ + height: layer_height, + overflow: "hidden" + }));*/ + + +/* old_height=$('body').height(); + + total_height=pos+popup_height+50; + + if(total_height>old_height) + { + + $('body').css('height', total_height); + + }*/ + + $('.close_popup').click(function () { + + $('#container_popup').click(); + + if(after_click) + { + + after_click(); + + } + + }); + + $('.click_popup').click(function (data) { + + if (data.target == this) { + + $(popup).hide(); + + $(popup).appendTo('body'); + + $('#layer_popup').remove(); + + $('#container_popup').remove(); + + //$("body > #height-helper").contents().unwrap(); + + $('#height-helper').remove(); + + $('body').css('height', '100%'); + + $('body').css('overflow', 'auto'); + + if(post_callback!=undefined) + { + + post_callback(); + + } + + $('.close_popup').unbind('click'); + + if(after_click) + { + + after_click(); + + } + + + } + + }); + + if(!after_show) + { + + $(popup).fadeIn(); + + } + else + { + + $(popup).fadeIn({'done': after_show(popup)}); + + } + + /* + $('.content_popup').click(function () { + + $(popup).hide(); + + $(popup).appendTo('body'); + + $('#layer_popup').remove(); + + $('.content_popup').remove(); + + $("body > #height-helper").contents().unwrap(); + + $('.close_popup').unbind('click'); + + });*/ + + + + + return false; + + /* + $(popup).click( function () { + + return false; + + });*/ + + }); + + } + +})( jQuery );