BootstrapでstaticなModalを表示する方法

Web

意外と難しくて90分くらいハマった。上手くできなかったので、表示出来ているページから不要なところを削っていく方法でやって理解。

<html>
<head>
  <link rel="stylesheet" media="screen" href="css/bootstrap.min.css">
  <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
  <script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
  <div class="modal" style="display:inline;position:relative">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>body</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">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

class="modal"のdivタグでdisplayプロパティ（style="display: inline"とか）を指定するのがミソで、これがないと何も表示されずハマる。

あと、サイズを変更するときはmodalじゃなくて中身のmodal-dialogのほうをリサイズしないといけない。

.modal {
    display: inline;
    position: relative;
}
.modal-dialog {
    width: 98%;
    padding: 1%;
}