отключить фон при открытии всплывающего окна

0

Я пытаюсь отключить фон после запуска всплывающего окна в окне. Следующий код, который я использую в div, отображает форму для ввода информации, которая должна быть передана в db.

Html:

<div id="add_project">
    <a href="#" title="Close">
        <div class="close">
            <p class="x">x</p>
        </div>
    </a>
    <h3>Add Project</h3>
    <form method="post">
        <table width="300" align="center">
            <tr></tr>
            <tr></tr>
            <tr style="border: none">
                <td align="center">
                    <input type="text" name="project name" placeholder="Enter Project Name" />
                </td>
            </tr>
            <tr></tr>
            <tr style="border: none">
                <td align="center">
                    <input type="text" name="project description" placeholder="Project Description" />
                </td>
            </tr>
            <tr></tr>
            <tr style="border: none">
                <td align="center">
                    <input type="button" value="Save" />
                </td>
            </tr>
            <tr style="border: none">
                <td align="center">
                    <input type="reset" value="Cancel" />
                </td>
            </tr>
        </table>
    </form>
</div>

JQuery, чтобы скрыть и показать div:

$("#add_project").hide();
$("#addProject").click(function () {
    $("#add_project").fadeIn(1000);
    $(".close").fadeIn(500);
});
Показать ещё 1 комментарий
Теги:
blur

3 ответа

1

Всегда есть много способов сделать что-то. Я бы установил div, который вы намереваетесь всплывать, как диалог, и просто открывайте его, когда это необходимо. Это автоматически перекрывает остальную часть страницы и предотвращает ввод пользователя. Вот и пример:

<script type="text/javascript">
    $(document).ready(function () {
        $("#divDialog").dialog(
            {
                modal: true,
                autoOpen: false,
                width: 700,
                buttons: { Cancel: function () { $(this).dialog("close"); } }
            }

        );
    });
</script>

<div id="divDialog" title="Data Modification">
  //elements to enter or modify data
</div>

а затем в процессе щелчка:

$('#divDialog').dialog('open');
  • 0
    Отлично. Это выглядит хорошо. Будем реализовывать это.
0

Не могли бы вы попробовать этот jsfiddle?

если он работает нормально, тогда вам нужно изменить JQuery, как показано ниже.

Ваш HTML-код

<div class="close" style="background-color:yellow"><a href="#" title="Close">
    <div ><p class="x">x</p></div></a></div>
 <div id="add_project" style="background-color:green" >      
<h3>Add Project</h3>


        <table width="300" align="center">

        <tr></tr>
        <tr></tr>

        <tr style="border: none">

        <td align="center"><input type="text" name="project name" placeholder="Enter Project Name" /></td>

        </tr>
        <tr></tr>
        <tr style="border: none">
        <td align="center"><input type="text" name="project description" placeholder="Project Description" /></td>

        </tr>

        <tr></tr>

        <tr style="border: none">

        <td align="center"><input type="button" value="Save" /></td>

        </tr>

        <tr style="border: none">

        <td align="center"><input type="reset" value="Cancel" /></td>
        </tr>
        </table>
</div>

Код JQuery...

    $(document).ready(function(){
    $(".close").fadeOut(500);
        $("#add_project").click(function() {
            $(this).hide();
            $(this).fadeOut(1000);
            $(".close").fadeIn(500);

        });

    $(".close").click(function() {
            $('#add_project').show();
            $('#add_project').fadeIn(1000);
            $(this).fadeOut(500);

        });
});
0
$("#add_project").fadeIn(1000, function(){
    $('#background_element').css({"backgroundImage":"none"});
    //Or
    $('#background_element').hide();
});

Чтобы показать это снова после закрытия всплывающего окна.

$("#add_project").fadeOut(1000, function(){
    $('#background_element').css({"backgroundImage":"yourbackgroundimage.gif"});
    //Or
    $('#background_element').show();
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню