Display Popup Using Javascript After This Div is VIsible

Question

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.

#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

The div has to be hidden, then;

    var yourDivvisible = document.getElementById("YOURDIVID").style.visibility = "visible";

if(yourDivvisble === true){ */ do something here to display your popup */ }

Something like this?