仅当特定div使用CSS时才显示弹出式窗口 [英] Display popup only when specific div is there using CSS

问题描述

当特定Div出现时，我要显示分享弹出式窗口。我在我的网站上使用嵌入式测验，用户必须回答多项选择题，然后得到一个结果。结果div类被称为 result_screen_container 。

I want to display a "Share Popup" when a specific Div appears. I am using an embedded quiz on my website which the user has to answer multiple choice questions then gets a result. The result div class is called result_screen_container.

我已经有弹出窗口，但它被写入由时间触发。

I already have the popup but it's written to be triggered by time. I want it to trigger when the result is there after all questions are finished.

弹出CSS：

#popup_box {

    display:none;

    position:fixed;

    _position:absolute; 

    left: 50%;

    top: 50%;

    z-index:10001;

    background:#fff;

    box-shadow: 0px 0px 15px #000;
    border-radius: 8px;

}

#popup_box .inner1 {

    text-align: center;

    padding:0 40px;

    color:#000;

    padding:20px;

}

#popupBoxClose {

    font-size:0;

    right:-22px;

    top:-14px;

    position:absolute;

    cursor: pointer;

    width: 38px;

    height: 37px;

    display: block;

}





/* Popup ends */

#fbshare{width:275px;height: auto;overflow: hidden;}

.inner-fbshare{width:275px;overflow: hidden;}

.inner-fbshare h3{font-size: 19px;margin: 0 0 10px 0;}

.inner-fbshare img{width:275px;height:150px;}

.outer-fbshare{width:275px;height: 45px;overflow: hidden;}

.fbshare_bt

{

    font-size: 22px; background:none repeat scroll 0 0 rgb(64, 94, 159);color:#FFF;

    text-align:center;margin-top:10px;padding: 12px;

    border-radius: 8px;
        font-weight: bold;

}

.fbshare_bt:hover{color:#FFF;text-decoration:none;}

.close_fbshare{float: right;color: #A3A3A3;text-decoration: none;}

.sa-icon.sa-custom {

    background-size: contain;

    border-radius: 0;

    border: none;

    background-position: center center;

    background-repeat: no-repeat;

}

推荐答案

不知道为什么Jsfiddle阻止警报。如果你想看看它如何显示try make example html文件。复制并粘贴。

I'm not sure why Jsfiddle block the alert. If you want to see how it display try make example html file. Copy and paste it.

HTML

<p>
Question 1 : Who will be the next president in United States?
</p>

<!-- Example this is your quiz you have 4 answer has been set an id when user click 
fsubmit() (That function you may find it at button) the process will be start at javascript -->

<table width="200" border="1">
<tr>
  <td><input type="radio" name="Barrack Obama" id="a" value="Barrack Obama"/>Barrack Obama</td>
  <td><input type="radio" name="Hilton" id="b" value="Hilton"/>Hilton</td>
</tr>
<tr>
  <td><input type="radio" name="Donald" id="c" value="Donald"/>Donald</td>
  <td><input type="radio" name="Martin Shaba" id="d" value="Martin Shaba"/>Martin Shaba</td>
</tr>
</table>
<p>
<input type="button" name="btnSubmit" id="btnSubmit" value="Submit" onclick="fsubmit()"/>
</p>

JS

var score = 0; /** if the score is 0 **/

function fsubmit() {  /** When user click fsubmit **/
    var correctanswer = document.getElementById("d"); /** If user detect the correct answer **/
    if (correctanswer.checked == true){
          score++;
        alert ("Correct! Your scores is now "+ score); /** Will be display correct alert box **/
    }
    else {
        alert ("Incorrect!"); /** Will be display incorrect alert box **/
    }
}

DEMO

这篇关于仅当特定div使用CSS时才显示弹出式窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！