JavaScriptとCSSを使用してライブラリを使用しないでポップアップパネルを作成するにはどうすればよいですか？

Question

私は丸みを帯びた角（スクロールバーは必要ありませんです。jqueryの分を使用）を画面の中央にポップアップパネル作成しようとしていますこれに類似：

これまでのところ私は：

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-familly:'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"); 
     }  
    }); 


    } 

を

なぜポップアップが表示されないのですか？私はデバッガでこれをテストしていましたが、エラーは見つかりませんでした。また、私はパネルを非表示にするか、ユーザーがdivの外をクリックしたときに削除したいと思います。どうやってするの？

Answer 1

$('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"); 
     }  
    }); 

私はあなたが$('div#make_it_easy_panel').append("<ul>")