Here is a question. In my project, I have the following JavaScript function:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
PopUpHide();
});
function PopUpShow(popup_title, pk_post_add){
document.getElementById("id_popup_title").innerHTML = popup_title;
document.getElementById('id_pk_post_add').value=pk_post_add;
$("#popup1").show();
$(document).keyup(function(ev){
if(ev.keyCode == 27)
$("#popup1").hide();
});
}
function PopUpHide(){
$("#popup1").hide();
}
</script>
The popup that calls the function looks like this:
<div class="b-popup" id="popup1" >
<div class="b-popup-content">
<div style="width:100%; height:10%;">
<center><b><font color=#000000 size="5" "Lucida Sans Unicode", "Lucida Grande", sans-serif><p id="id_popup_title"></p></font></b></center>
</div>
<form action="" method="post" >{% csrf_token %}
<font color=#000000 size="3">
<input id="id_pk_post_add" type="hidden" maxlength="1" name="pk_post" type="text">
<input type="hidden" value="1" maxlength="1" name="post_request" type="text">
<div style="width:100%; height:55%;">
<label for="id_description_post" style="display:table; margin-top:0px; padding-left:13px;">Description :<br></label><textarea id="id_description_post_id" maxlength="9999" name="description_post" style="resize:none; font-size: 12pt; width:100%; height:90%; border:solid 2px 9999FF" autofocus onkeyup="enableField(this.form,this.value)" type="text"></textarea><br>
</div>
<div style="width:100%; height:6%;">
<label for="id_start_date" style="display:table; text-align: center;">Start date : </lable><input type="text" name="start_date" id="datetimepicker" style="width:26%; height:120%; border:solid 2px 9999FF"readonly/>
<label>End date : </label><input type="text" name="end_date" id="datetimepicker2" style="width:26%; height:120%; border:solid 2px 9999FF"" readonly/>
</div>
<div style="width:100%; height:10%;">
<p align="left" style="padding-left:23px;"><label>Priority : </label>
<select method="post" name="priority_post" style="border:solid 2px 9999FF">
<option value="1" id="id_priority_post" name="priority_post">High</option>
<option value="2" id="id_priority_post" name="priority_post">Medium</option>
<option value="3" id="id_priority_post" name="priority_post" selected="selected">Low</option>
</select></p>
</div>
<div style="width:100%; height:23%;">
<center><input type="submit" class="button_add" name="bttnsubmit" value="Add" ONCLICK="window.location.href='/'" disabled="true" style="height:30px; width:80px; border:solid 2px 9999FF" >
<a href="" ONCLICK="PopUpHide()" style="color: #2E2EFE">Cancel</a></center>
</div>
</font>
</form>
</div>
</div>
And to call this function, you would use the following:
<div style="background:; width:33%; float:left;">
<table id="table1" border="0" cellpadding="4" cellspacing="0" align="center" width="99%">
<thead>
<tr >
<th><div id="b-container">
<a href="javascript:PopUpShow("Add problem item", 1)"><center><font face="Michroma" color="#FF2F2F">PROBLEMS</font> <font face="Michroma" color="#FFFFFF">ADD</font></center></a>
</div>
</th>
</tr>
</thead>
</table>
Question: I need the popup window (HTML text) to be placed inside the JavaScript function because when I start the page, it shows me the popup and hides it quickly. But I only want the popup to show when the function is called. How can I achieve this?
P.S. I tried putting the text in document.write but something didn't work right =)