僅當特定div在使用CSS時才顯示彈出式菜單

Question

當特定Div出現時，我想顯示「共享彈出式菜單」。我在我的網站上使用了一個嵌入式測驗，用戶必須回答多項選擇題，然後得到結果。結果div類叫做result_screen_container。

我已經有了彈出窗口，但是它的寫入是由時間觸發的。當所有問題完成後，我希望在結果出現時觸發它。

彈出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; 

} 

Answer 1

我不知道爲什麼的jsfiddle阻止警報。如果你想看看它如何顯示，請嘗試製作示例html文件。複製並粘貼它。

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