ページの読み込み時にスナックバーを表示する方法

-4

こんにちは、クリックしないうちにページが読み込まれた後、私のページにスナックバーを表示したいのですが。私はコードを持っていますが、onclickで動作します。しかし、私はページが読み込まれた後にクリックすることなくメッセージを表示したい。ページの読み込み時にスナックバーを表示する方法

function snackBar() { 
 
    var x = document.getElementById("snackbar") 
 
    x.className = "show"; 
 
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); 
 
}

#snackbar { 
 
    visibility: hidden; 
 
    min-width: 250px; 
 
    margin-left: -125px; 
 
    background-color: #333; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 2px; 
 
    padding: 16px; 
 
    position: fixed; 
 
    z-index: 1; 
 
    right:0; 
 
    bottom: 30px; 
 
    font-size: 17px; 
 
} 
 

 
#snackbar.show { 
 
    visibility: visible; 
 
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; 
 
    animation: fadein 0.5s, fadeout 0.5s 2.5s; 
 
} 
 

 
@-webkit-keyframes fadein { 
 
    from {bottom: 0; opacity: 0;} 
 
    to {bottom: 30px; opacity: 1;} 
 
} 
 

 
@keyframes fadein { 
 
    from {bottom: 0; opacity: 0;} 
 
    to {bottom: 30px; opacity: 1;} 
 
} 
 

 
@-webkit-keyframes fadeout { 
 
    from {bottom: 30px; opacity: 1;} 
 
    to {bottom: 0; opacity: 0;} 
 
} 
 

 
@keyframes fadeout { 
 
    from {bottom: 30px; opacity: 1;} 
 
    to {bottom: 0; opacity: 0;} 
 
}

<button onclick="snackBar()">Show Snackbar</button> 
 

 
<div id="snackbar">Some text some message..</div>

出典

2017-04-11 Prabu

単純なgoogle検索では、 onload'ハンドラ –

javascriptのためのこの1試してみてください。

<body onload="snackBar()">

を、あなたはjqueryのを使用しているならば、あなたも、このいずれかを試すことができます：

$(document).ready(function() { 
    snackBar(); 
});

うまくいけば、この意志をあなたのために働く..ありがとう！

出典

2017-04-11 12:28:16

これを承認してください。それがあなたに有用な場合には、。 –

は、私はあなたが$(document).ready(function(){ snackBar(); });

出典

2017-04-11 12:31:51 stephenpassero

$(document).ready(function() { 
 
setTimeout(function(){ 
 
     var x = document.getElementById("snackbar"); 
 
     x.className = "show"; 
 
     setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1000); 
 
     }, 2000) 
 
    });

#snackbar { 
 
     visibility: hidden; 
 
     min-width: 250px; 
 
     margin-left: -125px; 
 
     background-color: #333; 
 
     color: #fff; 
 
     text-align: center; 
 
     border-radius: 2px; 
 
     padding: 16px; 
 
     position: fixed; 
 
     z-index: 1; 
 
     right:0; 
 
     bottom: 30px; 
 
     font-size: 17px; 
 
    } 
 

 
    #snackbar.show { 
 
     visibility: visible; 
 
     -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; 
 
     animation: fadein 0.5s, fadeout 0.5s 2.5s; 
 
    } 
 

 
    @-webkit-keyframes fadein { 
 
     from {bottom: 0; opacity: 0;} 
 
     to {bottom: 30px; opacity: 1;} 
 
    } 
 

 
    @keyframes fadein { 
 
     from {bottom: 0; opacity: 0;} 
 
     to {bottom: 30px; opacity: 1;} 
 
    } 
 

 
    @-webkit-keyframes fadeout { 
 
     from {bottom: 30px; opacity: 1;} 
 
     to {bottom: 0; opacity: 0;} 
 
    } 
 

 
    @keyframes fadeout { 
 
     from {bottom: 30px; opacity: 1;} 
 
     to {bottom: 0; opacity: 0;} 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="snackBar()">Show Snackbar</button> 
 

 
    <div id="snackbar">Some text some message..</div>

こんにちはを行うだろう代わりにonclickをやって考えます！このデモでは、DOMの読み込みのみでスヌーズバーが表示され、2000 = 2秒のように表示したい場合はいつでもウィンドウロード後にスナックバーの時間を設定できます。

出典

2017-04-11 12:47:58 Muzamil301

Muzamil301ありがとうございました。近い機能を追加することは可能ですか？はいの場合、どうですか？ – Prabu

私の喜んでPrabu、はいこれは可能ですが、現在の状況では、スナックバーがそれ自身で隠れているので閉鎖機能は必要ありません。自分でそれを隠したい場合は閉じるボタンを追加し、jquery hide関数を使用してクローズボタンでクリックするとsnackbarを閉じます – Muzamil301

ページの読み込み時にスナックバーを表示する方法

答えて

関連する問題