Question

我想要显示一个＆＃34;分享弹出窗口＆＃34;当特定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会阻止警报。如果你想看看如何显示try make example html file。复制并粘贴它。

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时才显示弹出窗口

1 个答案: