39501


<http://kdemos.github.io/jquery-toast-plugin>  
こちらのサイトでは自分が実装したいトーストの形式をパラメータ入力することで  
プラグインのライブラリが、目標どおりに表示されるよう  
その実行文（JQuery）まで 表示・提供してくれるようになっています（多分そういう意図）。

サイトでは試しにパラメータで指定した形式のトーストも表示することができるようになっています。  
早速このサイト上で実装された実行文を、手元で開発中のWebページに適用してみたのですが  
思い通りの表示になってくれません。

ダイアログのような小窓でトーストが現れてくることを期待していましたが  
以下のようなブロック要素？！的な表示で現れてきます。  
（トップ真ん中に表れるように指定しても、ボトムに表れてくるし．．．）  
[![画像の説明をここに入力](https://i.stack.imgur.com/CQGLx.png)](https://i.stack.imgur.com/CQGLx.png)

====質問====  
自身のWebページのHTMLorCSSに問題がある、とは思うのですが一体何が問題と考えられるのでしょうか？  
大まかにいってしまえば  
HTMLのbodyの中には、  
二つのdivが直下に構成されている感じです。  
form要素を包むメインのdiv、その下にモーダルウィンドウ用のdivが控えられている、そんな感じです。

ご見解を頂けますと幸いです、よろしくお願い致します。  
以下、トーストのライブラリの実行文です。

-JQuery-
[code]

    $.toast({
        text: "登録できる状態です。",
        showHideTransition: "fade",
        allowToastClose: false,
        hideAfter: 3000,
        stack: 1,
        position: "top-center",
        bgColor: "#444444",
        textColor: "#eeeeee",
        textAlign: "center",
    });
    
[/code]


CC BY-SA 3.0
2017-11-11T10:29:41.597
39497
2017-11-11T12:57:50.690
25696
question
javascript jquery css html5
JQueryのトースト、紹介されたページのように表示されない。


<https://github.com/kamranahmedse/jquery-toast-plugin/tree/master/dist>  
cssは取り込んでいるでしょうか？

<https://github.com/kamranahmedse/jquery-toast-plugin>  
もし、こちらのHow to useを見ていないのであれば一読されることをお勧めします。


CC BY-SA 3.0
2017-11-11T11:41:12.973
39501
2017-11-11T11:41:12.973
4191
39497
answer