0

我有以下CSS：

.faq {
    position: absolute;
    border: 3px double #078800;
    background: #ECFFEB;
    left: 480px;
    width: 550px;
    z-index: 99999;
}
#showFAQ {
    cursor: pointer;
    color: #018125;
}

查询：

$(document).ready(function(){
    $('#showFAQ').click(function(){
        $('.faq').show().css("top", "400px").animate({top: 1150}, 300);
    });

    $('.sButton').click(function(){
        $('.faq').fadeOut('slow');
    });
});

HTML：

<span id="showFAQ">FAQ</span>

...

<div class=faq style='display: none'>
    <table border=0 cellPadding=8 cellSpacing=8 width=100%>
        <tr>
            <td colSpan=2 align=center style="font-family: Verdana, Arial; color: #078800; font-weight: bold; font-size: 18px;">Frequently Aasked Questions</td>
        </tr>
        <tr>
            <td>1. Do I have to complete the entire "Your Information" section?</td>
        </tr>
        <tr>
            <td style="padding-left:50px;">Yes, all information inside the "Your Information" is required to successfully complete the exam. Failure to do so will result in having to retake the exam from scratch.</td>
        </tr>
        <tr>
            <td>2. What if my browser crashes or the page exits and I was in the middle of the exam?</td>
        </tr>
        <tr>
            <td style="padding-left:50px;">Unfortunately, at this time there is no way to save the session. You will have to retake the exam from the start. We are working on fixing that and will update everyone on when it goes in effect.</td>
        </tr>
        <tr>
            <td>3. Can I retake the exam multiple times?</td>
        </tr>
        <tr>
            <td style="padding-left:50px;">Yes, but only the first one will count. If for any reason, you needed to take it more than once, please email HR and let them know why and they will reach out to you to with resolution.</td>
        </tr>
        <tr>
            <td>4. I pressed the "Submit Answers" button and now the button shows "Processing..." but I can't press it anymore?</td>
        </tr>
        <tr>
            <td style="padding-left:50px;">There is an error control put in place to ensure every question is answered before submitting the exam. Please ensure all questions have been answered and then the "Processing..." button will change back to "Submit Answers" which is clickable.</td>
        </tr>
        <tr>
            <td>5. I did everything as per instruction, but I can't still submit the exam.</td>
        </tr>
        <tr>
            <td style="padding-left:50px;">Please reach out to our Helpdesk at x2000 for further troubleshooting steps to assist in completing the exam.</td>
        </tr>
        <tr>
            <td colSpan=2 align=center><input class=sButton type=button value="Close Window" /></td>
        </tr>
    </table>
</div>

我要做的是一旦弹出窗口出现，我希望整个页面变暗，以便弹出窗口引起用户的注意。我知道那里还有其他人，但我决定自己做而不需要太多编码。

我想使用以下不透明度为 45% 的图像： 淡出背景

我想使用repeat-x 和repeat-y 将图像放在弹出窗口正下方的整个页面上，这样用户仍然可以看到该页面，但弹出窗口突出。关闭弹出窗口后，我希望图像淡出以显示网页。

4

2 回答 2

3

创建一个完整的窗口大小的毯子 div，按照您的喜好设置样式。给它一个比你的页面更大的 z-index。用你的弹出窗口创建一个新的 div，并给它一个比你的毯子更大的 z-index。

#blanket {
  z-index:1000;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0.45;
/* Other styling here */
}
#popup {
  z-index:1001;
/* other styling here */
}
于 2013-06-12T22:13:47.347 回答
1

您只需为您的 faq div 创建一个模态“底层”，如下所示：

http://jsfiddle.net/P2BfF/1/

 <div class="modal" style="display:none;"></div>

 .modal {
    width: 100000px;
    height: 100000px;
    background-color: #ccc;
    position:absolute;
    opacity: 0.2;
    overflow:hidden;
}

注意：我将宽度和高度设置得非常高，因为您有常见问题解答弹出窗口为其位置设置动画。

然后将其添加到 JS 中的切换：

$(document).ready(function(){
    $('#showFAQ').click(function(){
        $('.modal').show();
        $('.faq').show().css("top", "400px").animate({top: 1150}, 300);
    });

    $('.sButton').click(function(){
        $('.faq').fadeOut('slow');
        $('.modal').hide();
    }); 
});
于 2013-06-12T22:20:44.847 回答