0

次のコードで Twitter Bootstrap を使用してモーダル ウィンドウを作成しようとしました

<link rel= "stylesheet" href = "/static/bootstrap/css/bootstrap.css" >
<script src ="/static/bootstrap/js/bootstrap-modal.js" ></script>
<script type = "text/javascript" src= "/static/bootstrap/js/bootstrap.js" ></script>
<script src="/static/js/jquery.js></script>
<div class="modal hide" id="myModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…&lt;/p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close </a>
        <a href="#" class="btn btn-primary"> Save changes </a>
    </div>
</div>
<a class="btn" data-toggle="modal" href="#myModal"> Launch Modal </a>

しかし、それでもボタンは 1 つしか表示されません。リンクをクリックしても何も起こらず、モーダル ウィンドウがポップアップしません。私が間違っていることを見つけるのを手伝ってください。PS私は今それを学び始めました。私のエラーがどこにあるのか教えていただければ、それは素晴らしいことです。

4

1 に答える 1

2

bootstrap.jsafter を読み込んでいますbootstrap-modal.js。

同様に、それらを の最後に移動することをお勧めします<body>。

<html> 

    <head>
        <link href="bootstrap.css" rel="stylesheet"> 
    </head>

    <body>

        <div class="container">

        <div id="example" class="modal hide fade in" style="display: none; ">

            <div class="modal-header">
                <a class="close" data-dismiss="modal">?</a>
                <h3>This is a Modal Heading</h3>
            </div>

            <div class="modal-body">
                <h4>Text in a modal</h4>
                <p>You can add some text here.</p>              
            </div>

            <div class="modal-footer">
                <a href="#" class="btn btn-success">Call to action</a>
                <a href="#" class="btn" data-dismiss="modal">Close</a>
            </div>

        </div>

        <a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Open modal</a>

        <script src="jquery.js"></script>
        <script src="bootstrap-modal.js"></script>

    </body>

</html>
于 2012-08-11T14:50:02.110 に答える