Как я могу отобразить всплывающее окно с таймером во Flutter? - PullRequest
Новая
       8

Как я могу отобразить всплывающее окно с таймером во Flutter?

0 голосов
/ 13 июля 2020

Я хочу, чтобы в моем приложении появилось всплывающее окно с HTML & JS скриптом. Я могу отображать всплывающее окно в веб-просмотре, но оно не исчезает sh по истечении времени. На самом деле, мне нужно что-то похожее на промежуточную рекламу.

В приведенном ниже коде всплывающее окно - это то, что я хочу отобразить в своем приложении. 

    $(document).ready( function() {

        // When site loaded, load the Popupbox First
        loadPopupBox();

        $('#popupBoxClose').click( function() {            
            unloadPopupBox();
        });

        $('#container').click( function() {
            unloadPopupBox();
        });

        function unloadPopupBox() {    // TO Unload the Popupbox
            $('#popup_box').fadeOut("slow");
            $("#container").css({ // this is just for style        
                "opacity": "1"  
            }); 
        }    

        function loadPopupBox() {    // To Load the Popupbox
            
            var counter = 10;
            var id;
            $('#popup_box').fadeIn("slow");
            $("#container").css({ // this is just for style
                "opacity": "0.3"  
            });
            
            id = setInterval(function() {
                counter--;
                if(counter < 0) {
                    clearInterval(id);
                    
                    unloadPopupBox();
                } else {
                    $("#countDown").text("it closed  after " + counter.toString() + " seconds.");
                }
            }, 1000);
            
        }        
    });
#popup_box { 
    display:none; /* Hide the DIV */
    position:fixed;  
    _position:absolute; /* hack for internet explorer 6 */  
    height:500px;  
    width:500px;  
    background:;  
    left: 400px;
    top: 50px;
    z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
    margin-left: 25px;  

    /* additional features, can be omitted */
    border:2px;      
    padding:15px;  
    font-size:15px;  
    -moz-box-shadow: 0 0 5px;
    -webkit-box-shadow: 0 0 5px;
    box-shadow: 0 0 5px;

}

#container {
    background:; /*Sample*/
    width:100%;
    height:100%;
}

a{  
cursor: pointer;  
text-decoration:none;  
} 

/* This is for the positioning of the Close Link */
#popupBoxClose {
    font-size:20px;  
    line-height:15px;  
    right:5px;  
    top:5px;  
    position:absolute;  
    color:#6fa5e2;  
    font-weight:500;      
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="popup_box">   
    <h1 id="countDown">it closed  after 10 sec</h1>
    <a id="popupBoxClose">Close</a>    
</div>

Какое лучшее решение для вставки всплывающего окна HTML в приложении во флаттере?

Большое спасибо.

...