Popup form with Javascript & CSS

Ready to use popup report form with radio buttons built using pure JavaScript and CSS. If you would like to understand more of its internal functionality, I would suggest taking a look at this comprehensive course:  

JavaScript for beginners - learn by doing

The CSS style:

<style>
#overlay {
     overflow: auto;
     position: fixed;
     left: 0px;
     top: 0px;
     width:100%;
     min-height:100%;
     z-index: 1000;
     background:rgba(0,0,0,0.6);
}

#overlay div {
     width:450px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:left;
  box-shadow:0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  border-radius:6px;
}

#upprev_close{
background:  white;
    border:0;
    color: #929292;
    float: right;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
 cursor:pointer;cursor:hand;
}

#report_form input[type="radio"] {
   display:none;
}

#report_form  label {
    display:table;
    background-color:#ddd;
    padding:4px 11px;
 cursor:pointer;cursor:hand;
 border-radius:3px 3px 3px 3px;
 margin: 0.3em;
}

#report_form  input[type="radio"]:checked + label {
    background-color:#bbb;
 box-shadow: -1px 0 5px orange;
}

</style>

The HTML + JavaScript:

<script type="text/javascript">
function report(c_id) {
    var form = document.createElement("form", "report_form");
    form.id = "report_form";
    form.method = "post";
    form.action = "index.php?mode=post_comment";
    var reply_place = document.createElement("div");
    reply_place.id = "overlay";
    var inner_div = document.createElement("div"), button_close = document.createElement("button");
    button_close.id = "upprev_close";
    button_close.innerHTML = "x";
    button_close.onclick = function () {
        var element = document.getElementById('overlay');
        element.parentNode.removeChild(element);
    };
    inner_div.appendChild(button_close);

    var legend = document.createElement("legend");
    legend.innerHTML = "Why do you want to report this?";
    form.appendChild(legend);

    var input1 = document.createElement("input");
    input1.type = "radio";
    input1.id = "nudity";
    input1.value = "nudity";
    input1.name = "options";
    var radio_label1 = document.createElement("label");
    radio_label1.htmlFor = "nudity";
    radio_label1_text = "Nudity";
    radio_label1.appendChild(document.createTextNode(radio_label1_text));
    form.appendChild(input1);
    form.appendChild(radio_label1);

    var input2 = document.createElement("input");
    input2.type = "radio";
    input2.id = "attacks";
    input2.value = "attacks";
    input2.name = "options";
    var radio_label2 = document.createElement("label");
    radio_label2.htmlFor = "attacks";
    radio_label2_text = "Personal attack";
    radio_label2.appendChild(document.createTextNode(radio_label2_text));
    form.appendChild(input2);
    form.appendChild(radio_label2);

    var input3 = document.createElement("input");
    input3.type = "radio";
    input3.id = "spam";
    input3.value = "spam";
    input3.name = "options";
    var radio_label3 = document.createElement("label");
    radio_label3.htmlFor = "spam";
    radio_label6_text = "Spam";
    radio_label3.appendChild(document.createTextNode(radio_label6_text));
    form.appendChild(input3);
    form.appendChild(radio_label3);

    var submit_btn = document.createElement("input", "the_submit");
    submit_btn.type = "submit";
    submit_btn.className = "submit";
    submit_btn.value = "Report";
    form.appendChild(submit_btn);

    submit_btn.onclick = function () {
        var checked = false, formElems = this.parentNode.getElementsByTagName('input');
        for (var i = 0; i < formElems.length; i++) {
            if (formElems[i].type == 'radio' && formElems[i].checked == true) {
                checked = true;
                var el = formElems[i];
                break;
            }
        }
        if (!checked) return false;
        var poststr = "c_id=" + c_id + "&reason=" + encodeURI(el.value);
        alert(poststr);
        return false;
    }

    inner_div.appendChild(form);
    reply_place.appendChild(inner_div);

    var attach_to = document.getElementById("wrapper"), parentDiv = attach_to.parentNode;
    parentDiv.insertBefore(reply_place, attach_to);

}
</script>

<span style="cursor:pointer;cursor:hand;" onclick="report(127);">Report this!</span>
<div id="wrapper"></div>

As you can see to trigger the modal form you'll have to run the function report(); whereas input parameter you could pass the id of an item, article or comment you want to report.

Another example is this small JavaScript function that will invoke itself after 15 seconds, fading the screen and placing a box with asynchronously loaded Facebook like button. It's very useful if you want to promote a page in front of your visitors. Usage: just replace place_your_application_id with your facebook application id which you can find here: https://developers.facebook.com/apps

<script>
function fb_pop(){
  var b = document.getElementsByTagName("body")[0], d = document.createElement("div");
  d.id = "facebook_overlay";
  var c = document.createElement("div");
  c.id = "dyn_facebook";
  c.innerHTML = 'Do you like this page? <div id="fb-root"></div><fb:like layout="button_count" show-faces="false" send="false" href="' + document.URL + '" width="150px"></fb:like><span id="facebookClose">X</span>';
  b.appendChild(d);
  b.appendChild(c);
  a = document.createElement("script");
  a.src = "//connect.facebook.net/en_US/all.js#appId=place_your_application_id&xfbml=1";
  a.async = !0;
  a.id = "fbjssdk";
  b.parentNode.insertBefore(a, b);
  document.getElementById("facebookClose").onclick = function() {
    c.style.visibility = "hidden";
    d.style.visibility = "hidden"
  }
}
setTimeout(fb_pop, 15000);
</script>

The 2 CSS rules:
 #dyn_facebook { width: 250px; height: 250px; margin-left: auto; margin-right: auto; position: fixed; top: 50px; left: 35%; z-index: 30; background: #fcfcfc; border-radius: 6px; padding: 1em; }
 #facebook_overlay { width: 100%; height: 100%; opacity: 0.8; filter: alpha(opacity=80); position: fixed; top: 0px; left: 0px; z-index: 20; background: #FF8B00; display: block; }

Enjoy learning!