Question

我试图在窗口中触发弹出窗口后禁用后台。我在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>

隐藏和显示div的jQuery：

$("#add_project").hide();
$("#addProject").click(function () {
    $("#add_project").fadeIn(1000);
    $(".close").fadeIn(500);
});

Answer 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');

Answer 2

请你试试这个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);

        });
});

Answer 3

$("#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();
});

弹出窗口打开时禁用背景

3 个答案: