I have a posting in the PHP section titled “Help with Upload script = “Must agree to terms first…”, in which I explain: The script I’ve installed (successfully) allows the user to drag/drop, or choose a file, to upload. How can a feature be added where the user must agree to the Terms before the dragged/dropped/chosen file can be uploaded? This script uploads the file as soon as it is drag/dropped.
So, I looked into a Modal Box which will alledgedly creates a lightbox over the drag/drop area. So, I followed along with this page: https://paulund.co.uk/how-to-create-a-simple-modal-box-with-jquery,
but my copying of it isn’t working successfully yet, probably because I don’t understand a few things (I’m learning as I go here).
They state about the line of code below: “We want this run on the click event of a link, so we need to create a link and add a class so we can reference it later”.
<a href="#" class="paulund_modal">Click Here</a>
I’m not completely sure how that statement can relate to having someone agree to the Terms first before uploading. I understand the concept that the event is to click, or check a box, which means they agree to the Terms, which will also remove the modal box, making the drag/drop area accessible for uploads, but I need some more guidance, or an example please, of how that would work with this script. I think I’m pretty close, but I’m probably missing some specific function code stating “do somthing here”…
Another question is, do I replace # with the page where this modal box code is (the upload page)?
There is also that type of ‘link’ code on line 86 below. Any enlightenment will be greatly appreciated.
Here’s the js code:
(function($){
// Defining our jQuery plugin
$.fn.paulund_modal_box = function(prop){
// Default parameters
var options = $.extend({
height : "250",
width : "500",
title:"JQuery Modal Box Demo",
description: "Example of how to create a modal box.",
top: "20%",
left: "30%",
},prop);
return this.click(function(e){
add_block_page();
add_popup_box();
add_styles();
$('.paulund_modal_box').fadeIn();
});
function add_styles(){
$('.paulund_modal_box').css({
'position':'absolute',
'left':options.left,
'top':options.top,
'display':'none',
'height': options.height + 'px',
'width': options.width + 'px',
'border':'1px solid #fff',
'box-shadow': '0px 2px 7px #292929',
'-moz-box-shadow': '0px 2px 7px #292929',
'-webkit-box-shadow': '0px 2px 7px #292929',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px',
'background': '#f2f2f2',
'z-index':'50',
});
$('.paulund_modal_close').css({
'position':'relative',
'top':'-25px',
'left':'20px',
'float':'right',
'display':'block',
'height':'50px',
'width':'50px',
'background': 'url(images/close.png) no-repeat',
});
/*Block page overlay*/
var pageHeight = $(document).height();
var pageWidth = $(window).width();
$('.paulund_block_page').css({
'position':'absolute',
'top':'0',
'left':'0',
'background-color':'rgba(0,0,0,0.6)',
'height':pageHeight,
'width':pageWidth,
'z-index':'10'
});
$('.paulund_inner_modal_box').css({
'background-color':'#fff',
'height':(options.height - 50) + 'px',
'width':(options.width - 50) + 'px',
'padding':'10px',
'margin':'15px',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px'
});
}
function add_block_page(){
var block_page = $('<div class="paulund_block_page"></div>');
$(block_page).appendTo('body');
}
function add_popup_box(){
var pop_up = $('<div class="paulund_modal_box"><a href="/Upload.html" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
$(pop_up).appendTo('.paulund_block_page');
$('.paulund_modal_close').click(function(){
$(this).parent().fadeOut().remove();
$('.paulund_block_page').fadeOut().remove();
});
}
return this;
};
})(jQuery);