javascript - Bootstrapモーダルが起動しない

Question

私は Bootstrap の初心者で、このサイトから学んでいます。これは私のコードで、押しlaunch modalても何も起こりません。

<!DOCTYPE html>
<html>
  <head>
    <title>Prices for todo app</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="bootstrap-3.0.0/dist/css/custom.css" rel="stylesheet" media="screen">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="bootstrap-3.0.0/assets/js/html5shiv.js"></script>
      <script src="bootstrap-3.0.0/assets/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<a class="btn" data-controls-modal="my-modal" data-backdrop="true" >Launch Modal</a>
<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
 <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
  $('#my-modal').modal({
  show:true,
  closeOnEscape: true
});
</script>
  </body>
</html>

score 4 · Accepted Answer

Twitter Bootstrap v1.3.0 を使用せず、v2.3.2 または v3.0.0 を使用することを強くお勧めします。

#my-modalとにかく、Bootstrap Modal は HTML に依存しているため、HTML に次のマークアップを含む要素が必要です。

TB v.1.3.0:

<a class="btn" data-controls-modal="my-modal" data-backdrop="true" >Launch Modal</a>
<div id="my-modal" class="modal hide fade" style="display: none;">
    <div class="modal-header"> <a href="#" class="close">×</a>
         <h3>Modal Heading</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…&lt;/p>
    </div>
    <div class="modal-footer"> <a href="#" class="btn primary">Primary</a>
 <a href="#" class="btn secondary">Secondary</a>
    </div>
</div>

TB v.2.3.2:

<a href="#my-modal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<div id="my-modal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

TB v3.0.0:

<a data-toggle="modal" href="#my-modal" class="btn btn-primary">Launch demo modal</a>
<div class="modal fade" id="my-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

score 2 · Accepted Answer

存在しないモーダルを呼び出しています (モーダルの html をページに配置する必要があります)。次に、起動リンクに関連付けられていません (単独でポップアップします)。モーダル html を追加してから編集します。

$('#my-modal').modal({
  show:true,
  closeOnEscape: true
});

に

$('a.btn').click(function () {
  $('#my-modal').modal({
      show: true,
      closeOnEscape: true
  });
});

また、Oswaldo は、モーダルを呼び出すためにカスタム JavaScript をまったく持つ必要がないという点で正しいです。ただし、特定の属性を指定して独自のコードを介してロードする場合は、クリックイベントに配置する必要があります。そうしないと、自動的にポップアップします (作成したとおりに show: true を使用している場合)。カスタムコードを使用してポップアップする場合、データビットを追加する必要はまったくありません。

カスタムjsで更新されました： http://jsfiddle.net/spacebean/WgQt3/10/

追加の js なし: http://jsfiddle.net/spacebean/WgQt3/9/

score 2 · Accepted Answer

表示されていないhtmlモーダルを配置するのを忘れています。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </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><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

たとえば、クリックイベントで実行できるjQueryの後

$('#my-modal').modal();

score 0 · Accepted Answer

そのjqueryの構文を使用できます

$(function(){

$("#buttonId").click(
function(){
$("#modelId").modal('show');
});

});

これは私のケースで動作します。ありがとう

javascript - Bootstrapモーダルが起動しない

5 に答える 5

Related

Reference