Added popup support
This commit is contained in:
parent
fc5fff5703
commit
a7d1b6225e
2 changed files with 298 additions and 0 deletions
48
css/popup.css
Normal file
48
css/popup.css
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
250
popup.js
Normal file
250
popup.js
Normal file
|
|
@ -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('<div id="layer_popup"></div>');
|
||||||
|
|
||||||
|
$('body').prepend('<div id="layer_popup"></div>');
|
||||||
|
|
||||||
|
$('body').css('overflow', 'hidden');
|
||||||
|
|
||||||
|
//$('body').height();
|
||||||
|
|
||||||
|
|
||||||
|
$(popup_container).prepend('<div class="content_popup"></div>');
|
||||||
|
|
||||||
|
$(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('<div id="container_popup"></div>');
|
||||||
|
|
||||||
|
$('#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($('<div id="height-helper"/>').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 );
|
||||||
Loading…
Add table
Add a link
Reference in a new issue