Twitter Bootstrapのボタンを押した際にモーダルダイアログを閉じる方法

2013-04-10T00:00:00+00:00 CSS

data-dismissを設定すれば良いらしい

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="normalize.css" />
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
  </head>
  <body>
    <div class="navbar">
      <div class="navbar-inner">
        <a href="#modal" class="brand" data-toggle="modal">brand</a>
      </div>
    </div>
    <div id="modal" class="modal hide fade">
      <div class="modal-header">
        <h4>header</h2>
      </div>
      <div class="modal-body">
        <p>body</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-large btn-primary" onclick="doSend()" data-dismiss="modal">send</button>
      </div>
    </div>
  </body>
</html>

というように今回ではmodal-footerな所にボタンを設置。それをクリックした際には自動でモーダルダイアログが閉じられる模様

ただこれだとモーダルダイアログで入力検証とかを突破しようがしまいがモーダルダイアログが閉じられてしまうのでは無いかっていう予想。そこら辺の対処とかどうするかって所としてはアクションするボタンとモーダルダイアログを閉じるボタンを分けたりする事で対処するとかくらいなんじゃないかなーっと

とりまぁメモ

Twitter Bootstrapとjquery.sidr.jsを組み合わせてみる pirumを使ってPEARチャネルサーバーを構築