I'm currently working on creating a popup panel that is centered on the screen with rounded corners (scrollbars are unnecessary) using jQuery min, similar to this example:
https://i.stack.imgur.com/0kYO6.png
My progress so far:
function (package){
document.addEventListener('click', function(e)
{
getParent(e.target);
var node1 = $("#make_it_easy_styles");
var node2 = $("#make_it_easy_panel");
if ( node1.length ) node1.remove();
if ( node2.length ) node2.remove();
$("html > head").append("<style id=make_it_easy_styles>div#make_it_easy_panel { float:left; position: relative; left:10%; top:20%; border-radius: 2em; font-family:'Arial Black'; font-size:13px; }</style>\n\r");
$("body").append("<div id=make_it_easy_panel></div>");
$('div#panel').append("<ul>");
var level = elements.length;
for (var level = elements.length;
level>1 ;
level--)
{
$('div#make_it_easy_panel ul').append("<li>" + elements.collection[level].tag + "</li>\r\n");
}
});
}
Why am I not able to see the popup? I tested this in the debugger and did not find any errors. Additionally, I would like to know how to hide or remove the panel when the user clicks outside of the div. Any suggestions?