CODEWITHSUNDEEP
javascriptcssdom
John Boe
John Boe

Reputation: 3611

How to create popup panel using JavaScript & CSS, no libraries?

I am trying to create popup panel centered on the screen with rounded corners (scrollbars are not neccessary; using jquery min) similar to this:

Panel

So far I am:

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


  }

Why do I not see any popup? I was testing this in debuger and I did not found any error. Also I would like to hide the panel or remove it when user clicks outside of the div. How to do it?

Upvotes: 0

Views: 435

Answers (1)

Gatsbill
Gatsbill

Reputation: 1790

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

I think you have to change $('div#panel').append("<ul>"); with $('div#make_it_easy_panel').append("<ul>")

Upvotes: 1

Related Questions