0

jquery:

$("#type_name").click(function(){
            $("body").append('<div class="modalOverlay">');
            $("#add_form").fadeIn(1000);
            $("#first_name").val("");
            $("#email").val("");
            $("#phone_no").val("");
            $("#mobile").val("");
            positionPopup('#add_form');
            $("#first_name").focus();
        });

CSS:

.modalOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    opacity: .4;

    background-color: rgba(0,0,0,0.3);
}

ポップアップ ボックスの html:

<div id="add_form" style="display:none">
    <form id="form"  method="post" action="." onsubmit="return form_validate()">
        {% csrf_token %}
        <h2> Choose Follower Name</h2>
        <br />
        <table  width="100%">
            <tr>
                <td style="width:100px;">First name:</td><td><input type="text" name="first_name" id="first_name" maxlength="20"/></td>
            </tr>
            <tr>
                <td>Email:</td><td><input type="text" name="email" maxlength="36" id="email"/></td>
            </tr>
            <tr>
                <td>Daytime phone:</td><td><input type="text" name="phone" maxlength="15" id="phone_no" /></td>
            </tr>
            <tr>
                <td>Mobile phone:</td><td><input type="text" name="mobile" maxlength="15" id="mobile" /></td>
            </tr>
            <tr style="display:none;color:red" id="warning"><td colspan="2" align="center" >All fields are manditory</td></tr>
        </table>
        <div style="width:180px;margin:20px 5px 0 10px" align="right">

            <button style="margin-right:10px;" type="button" class="close" name="cancel" class="forward backicon">
                <img src="{{ STATIC_URL }}images/button-icon-ir-back.png" width="12" height="17" alt="" />
            Cancel</button>   {% include "buttons/add.html" %}
        </div>

ポップアップを表示しているときに、背景の modalOverlay css を非表示にするために使用しました。背景を非表示にすることはできますが、ポップアップ ボックスでオプションやフィールドを選択することはできません。

ありがとう

4

1 に答える 1

0

z-index を modalOverlay クラス セレクターに追加する必要があります。

.modalOverlay {
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: .4;
background-color: rgba(0,0,0,0.3);}

値として 9999 を使用しましたz-indexが、他の要素がより高い値を持たない限り、任意の数値にすることができz-indexます。考慮すべきもう1つのことは、 z-index が position を持つ要素またはあなたのような要素にのみ適用されるabsoluteことrelativeですfixed。

トピック外ですが、まだ問題に関連していopacityます。modalOverlay に .4 を設定すると、その中のすべてにopacity.4 も含まれます。それがあなたが達成しようとしていることだとは思いません。私が間違っていたら許してください。

于 2013-05-21T14:18:14.117 に答える