ブートストラップモーダルウィンドウの問題

debugcn 投稿 Dev

user3349225

ここに初めて投稿します。私はサイトを検索しましたが、私が抱えているこの問題に対する答えを見つけることができなかったので、誰かがアイデアを持っていることを願っています：

問題は、ホームページの「連絡先」リンクをクリックすると、モーダルウィンドウにコンテンツ（ボタン/テキストなど）が表示されますが、「閉じる」ボタンをクリックすると画面が灰色になり、応答しなくなることです。

<div class = "modal fade" id = "contact" role = "dialog">
    <div class = "modal-dialog">
        <div class = "modal-content">
            <div class = "modal-header">
                <h4>Contact Tech Site</h4>
            </div>
            <div class = "modal-body">
                                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
            </div>
            <div class = "modal-footer">
                <button type="button" class = "btn btn-default" data-dismiss = "modal">Close</button>
                <button type="button" class = "btn btn-primary" data-dismiss = "modal">Save changes</button>
            </div>
        </div>
    </div>

</div>
</div>

明確にするために、これは「連絡先」リンクをクリックした後の私のページの外観です：https：//www.dropbox.com/s/a8etlue21jfk1ti/Screenshot%202014-06-24%2017.54.27.png

何かアドバイスをいただければ幸いです。

Ravimallya

いくつかの問題があります。navbarでdivs、ulsを閉じていません。また、この行に適切にコメントしていないなど。詳細：

divこのdivのを閉じていません<div class="navbar navbar-primary navbar-static-top">。
ulこのulのために閉じられていません<ul class="nav navbar-nav navbar-right">。
divモーダルdivのを閉じていません<div class="modal fade" id="contact" role="dialog">

http://fiddle.jshell.net/52VtD/6726/show/モーダルは正常に機能しています。

結論

期待どおりの結果を得るには、HTMLがクリーンでセマンティックであり、終了要素が欠落していない必要があります。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-29

コメントを追加

サインイン

分類Dev

Related 関連記事

記事