Popup form with Javascript & CSS

Ready to use popup report form with radio buttons built using pure JavaScript and CSS. Try the report form demo HERE:

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( ); while as its parameter you can pass the id of item, article or comment you want to report. by Nevyan Neykov

---