Interacting with jQuery:
$("#type_name").click(function(){
$("body").append('<div class="modalOverlay">');
$("#add_form").fadeIn(1000);
$("#first_name").val("");
$("#email").val("");
$("#phone_no").val("");
$("#mobile").val("");
positionPopup('#add_form');
$("#first_name").focus();
});
Styling in CSS:
.modalOverlay {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: .4;
background-color: rgba(0,0,0,0.3);
}
HTML structure for the popup box:
<div id="add_form" style="display:none">
<form id="form" method="post" action="." onsubmit="return form_validate()">
{% csrf_token %}
<h2> Choose Follower Name</h2>
<br />
<table width="100%">
<tr>
<td style="width:100px;">First name:</td><td><input type="text" name="first_name" id="first_name" maxlength="20"/></td>
</tr>
<tr>
<td>Email:</td><td><input type="text" name="email" maxlength="36" id="email"/></td>
</tr>
<tr>
<td>Daytime phone:</td><td><input type="text" name="phone" maxlength="15" id="phone_no" /></td>
</tr>
<tr>
<td>Mobile phone:</td><td><input type="text" name="mobile" maxlength="15" id="mobile" /></td>
</tr>
<tr style="display:none;color:red" id="warning"><td colspan="2" align="center" >All fields are manditory</td></tr>
</table>
<div style="width:180px;margin:20px 5px 0 10px" align="right">
<button style="margin-right:10px;" type="button" class="close" name="cancel" class="forward backicon">
<img src="{{ STATIC_URL }}images/button-icon-ir-back.png" width="12" height="17" alt="" />
Cancel</button> {% include "buttons/add.html" %}
</div>
When displaying the popup box, I utilized the modalOverlay css to hide the background. However, there seems to be an issue where I am unable to select any option or field within the popup box.
Thank you