Question

我是Bootstrap的初学者并从中学习site 这是我的代码，当我按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>

Answer 1

我真的建议你不要使用Twitter Bootstrap v1.3.0，转到v2.3.2或v3.0.0。

无论如何，Bootstrap Modal依赖于HTML，您需要HTML中的#my-modal元素并带有以下标记。

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…</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…</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 -->

Answer 2

您忘了放置未显示的html modal。

<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之后，您可以使用click事件运行，例如

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

Answer 3

你正在调用一个不存在的模态（你需要在页面中放置模态的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/

Answer 4

您可以使用jquery

的语法

$(function(){

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

});

这适用于我的情况。谢谢

Answer 5

最后添加此内容，然后关闭body标签...

可选JavaScript->首先是jQuery，然后是Popper.js，然后是Bootstrap JS

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Bootstrap模式未启动

5 个答案: