Блог

Главная - Вопросы по программированию - Вызываемое всплывающее окно html внутри функции javasctipt

Вызываемое всплывающее окно html внутри функции javasctipt

#javascript #html #css

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

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

Вопрос :
Для меня нужно, чтобы всплывающее окно (текст html) помещалось внутри функции javascript, потому что, когда я запускаю страницу, они показывают мне всплывающие окна и быстро их скрывают, но мне нужно показывать всплывающее окно только при вызове функции. Как я могу это сделать?

PS Я пытаюсь поместить текст в document.write, но что-то пошло не так =)

Комментарии:

1. Рассматривали ли вы возможность использования фреймворков привязки данных javascript или даже jQuery?

2. Нет, извините, я не знаю, о чем вы говорите. Можете написать какую-нибудь ссылку с примером?

3. Прежде всего, пожалуйста, избегайте использования встроенных стилей, если это абсолютно необходимо для таких вещей, как электронные письма. это делает ваш код нечитаемым и с ним трудно работать. также избегайте использования таких тегов, как <font> , <center> и т. Д., Которые устарели. Зачем использовать CSS . Вы не добавили кавычки во многих местах, например color=#000000 , и у вас также есть дополнительные кавычки во многих местах. Вы не закрываете < div> вокруг <table> . короче говоря, ваш HTML полностью недействителен. пожалуйста, сначала исправьте эти проблемы, и мы сможем перейти к всплывающим окнам

Ответ №1:

Я думаю, вам следует попробовать 

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

вместо:

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