2017-06-27 22 views
0

何らかの理由で、私のマテリアライズモーダルが本当に奇妙なレイアウトになっています。 私はCSSファイルに触れていないか、基本スタイルを全く変更していません。多分誰かが何が問題なのかを知っているかもしれない。モーダルのマテリアライズが正しく表示されない

私のモーダルは一部のdivの内部にありません。 Expected result

マイ結果:それはちょうどボディ

$(document).ready(function() { 
 
    $('.modal').modal(); 
 
    $('#modal1').on('click', function() {}); 
 
});
html, 
 
body { 
 
    max-height: 100%; 
 
    min-height: 100%; 
 
    overflow-x: hidden; 
 
} 
 

 
body { 
 
    background-image: url("../img/kristallwelt.jpg"); 
 
    -webkit-background-size: cover; 
 
    moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}
<!-- Modal Structure --> 
 
<div id="modal1" class="modal modal-fixed-footer"> 
 
    <div class="modal-content"> 
 
    <h4>Modal Header</h4> 
 
    <p>A bunch of text</p> 
 
    </div> 
 
    <div class="modal-footer"> 
 
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a> 
 
    </div> 
 
</div>

期待される結果内だ My Result

EDIT

私は解決策を得た後、私は参照に苦しんでいます。私はいくつかの偽の参照を持っている。この場合

エラー enter image description here

:できるだけ早く私は、ボタンをクリックすると、私はこれを取得します。 誰かがここで問題を見ていますか? **本体の端部に含ま

<!DOCTYPE html> 
<html> 
    <head> 
    <!-- JQuery --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <!-- JQuery UI --> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
    <!-- Bootstrap --> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <!-- Latest compiled JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <!-- Font aswesome --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
    <!-- Materialize Logos --> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <!-- Include CSS --> 
    <link rel="stylesheet" type="text/css" href="../css/style.css"> 
    </head> 
</html> 

ヘッダを含め

**

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css"> 

<!-- Compiled and minified JavaScript --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script> 

もこのコンソールエラーが関連する可能性が

エラー

enter image description here

+0

あなたはjsfiddleを持っていますか?修正するのは簡単でしょう。 –

+0

@Princesodhi申し訳ありません、今すぐ入手してください。緑色のdivの緑の丸いボタンはdivを開きます... https://jsfiddle.net/s2y272s3/#&togetherjs=Rf4mTbkNap – CallMeLeonardo

答えて

1

あなたのHTMLには多くのものが欠けていますので、コードを更新しました。

DEMO https://jsfiddle.net/98w7ro4u/

HTML

<!-- Modal --> 
<div id="modal1" class="modal fade modal-fixed-footer" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body">   
    <p>A bunch of text</p> 
     </div> 
     <div class="modal-footer"> 
     <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a> 
     <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Disgree</a> 
     </div> 
    </div> 

    </div> 
</div> 

jQueryの

$(document).ready(function() { 
    $('#modal1').modal('show'); 
}); 

CSS

You can use yours 
+0

私は他の問題があると思います。私の編集を見ていただけますか?私はそれが愚かな間違いだと思う... – CallMeLeonardo

+0

まず第一に、jQueryを取り除くのは2回です –

+0

どこかに住んでいますか? –

関連する問題