Bootstrap Progress Striped アニメーションサンプル

by opengl_8080

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<h2>backdrop</h2>
<h3>false</h3>

<p>オーバーレイを表示しないようにし、モーダルの外をクリックしてもモーダルが閉じないようにする。ただし、モーダルであることはかわらない。</p>

<button class="btn btn-default" data-toggle="modal" data-target="#backdrop-false-modal">show modal</button>

<div id="backdrop-false-modal" class="modal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">backdrop : false</h4>
            </div>
        </div>
    </div>
</div>

<h3>static</h3>
<button class="btn btn-default" data-toggle="modal" data-target="#backdrop-static-modal">show modal</button>
<div id="backdrop-static-modal" class="modal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">backdrop : static</h4>
            </div>
        </div>
    </div>
</div>

<hr />

<h2>keyboard</h2>
<h3>static</h3>
<button class="btn btn-default" data-toggle="modal" data-target="#backdrop-static-modal">show modal</button>
<div id="backdrop-static-modal" class="modal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">backdrop : static</h4>
            </div>
        </div>
    </div>
</div>

CSS

pre {
    margin-top: 10px;
}