在javascript函数中调用html弹出窗口

时间:2014-06-28 23:40:22

标签: javascript html css

我有一个问题。 在项目中我有javascript函数:

<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>

拥有调用函数的弹出窗口:

<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/>     &nbsp;&nbsp;&nbsp;      
                <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" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="" ONCLICK="PopUpHide()" style="color: #2E2EFE">Cancel</a></center>
                </div>
            </font>
        </form>
    </div>
</div>

如何调用此函数:

<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(&quot;Add problem item&quot;, 1)"><center><font face="Michroma" color="#FF2F2F">PROBLEMS</font>&emsp;<font face="Michroma" color="#FFFFFF">ADD</font></center></a>
                    </div>

                </th>
            </tr>
        </thead>
</table>

问题: 对于我来说需要弹出窗口(html文本)放在函数javascript中,因为当我启动页面时,它们会弹出并快速隐藏它们,但是我只需要在调用函数时显示弹出窗口。我怎么能这样做?

P.S。我尝试在document.write中放置文本,但出了点问题=)

1 个答案:

答案 0 :(得分:0)

我想你应该试试

<a onclick="PopUpShow(&quot;Add problem item&quot;, 1)"><center><font face="Michroma" color="#FF2F2F">PROBLEMS</font>&emsp;<font face="Michroma" color="#FFFFFF">ADD</font></center></a>

而不是:

<a href="javascript:PopUpShow(&quot;Add problem item&quot;, 1)"><center><font face="Michroma" color="#FF2F2F">PROBLEMS</font>&emsp;<font face="Michroma" color="#FFFFFF">ADD</font></center></a>