1

我是 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>
4

5 回答 5

4

我真的建议你不要使用 Twitter Bootstrap v1.3.0,选择 v2.3.2 或 v3.0.0。

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

结核病 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>

结核病 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>

结核病 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 -->
于 2013-10-15T12:06:50.897 回答
2

您正在调用一个不存在的模式(您需要将模式的 html 放在页面中),其次它不以任何方式绑定到启动链接(它会自行弹出)。添加您的模态 html,然后编辑:

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

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

此外,Oswaldo 是正确的,您根本不需要自定义 javascript 来调用您的模式。但是,如果您要指定特定属性并通过自己的代码加载它,则需要将其放入单击事件中,否则它将自动弹出(如果您按照编写的方式拥有它,则显示:true)。如果使用自定义代码弹出,则根本不需要添加数据位,反之亦然。

如此更新,使用自定义 js:http: //jsfiddle.net/spacebean/WgQt3/10/

没有额外的js:http: //jsfiddle.net/spacebean/WgQt3/9/

于 2013-10-15T12:02:33.400 回答
2

您忘记放置未显示的 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 之后,您可以使用 click 事件运行,例如

$('#my-modal').modal();
于 2013-10-15T11:55:22.707 回答
1

最后添加这个,在关闭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>
于 2019-11-03T14:36:34.000 回答
0

您可以使用 jquery 的语法

$(function(){

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

});

这适用于我的情况。谢谢

于 2013-10-15T11:56:25.310 回答