javascript - Bootstrap modal window not showing - Stack Overflow-软件玩家

admin管理员组
文章数量:1429561

I tried today with modal windows on Bootstrap, but I have a problem. Modal won't show. I did exactly as shown in getbootstrap/javascript/#modals but still it isn't working. Does anybody know the problem? Here's my code.

<html>
<head>

<!-- Bootstrap scripts -->
<link rel="stylesheet" href=".3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href=".3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest piled and minified JavaScript -->
<script src=".3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom script as written on bootstrap page -->
<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

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

I tried today with modal windows on Bootstrap, but I have a problem. Modal won't show. I did exactly as shown in getbootstrap./javascript/#modals but still it isn't working. Does anybody know the problem? Here's my code.

<html>
<head>

<!-- Bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest piled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom script as written on bootstrap page -->
<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

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

Share Improve this question edited Jan 20, 2016 at 2:40 RIYAJ KHAN 15.3k5 gold badges33 silver badges55 bronze badges asked Jan 20, 2016 at 1:52 user5740150

what happens if you remove the <script> section? That particular script will fail because #myModal doesn't exist yet. It would be best to wrap your current javascript in a $(function() { ... stuff on load goes here }) jQuery DOM-ready construct. – Cᴏʀʏ Commented Jan 20, 2016 at 1:57
Bootstrap and your script requires jQuery and you didn't loaded – blurfx Commented Jan 20, 2016 at 2:02
Can you please explain how to load it? I'm new at this. xD – user5740150 Commented Jan 20, 2016 at 2:06
go developers.google./speed/libraries/#jquery and put 1.x snippet script between <head> and </head> of your code. – blurfx Commented Jan 20, 2016 at 2:07
And yeah Cory, nothing happened. That <script> section which I wrote because on bootstrap's page it says: "Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript - 'now that script section which I wrote.' ". I don't really know where did I go wrong. I did exactly as it needed to be... – user5740150 Commented Jan 20, 2016 at 2:09

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

Ok so all you needed to do is add jquery to your javascript libraries as you can see below is working code just copy and paste the whole thing. In the head of your document there is a script tag with a link to bootstraps js file and above it is a link to jquerys js file. Bootstrap runs off of jquery so it will not work without it. With bootstrap you always need to load jquerys js file before bootstraps js file

<html>
<head>

<!-- Bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest piled and minified JavaScript -->
<script src="https://ajax.googleapis./ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom script as written on bootstrap page -->
<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

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

I think, you have two problems :

First one, as @Cory said, I think you ' ld be placed your custom javascript in the bottom of your page
Second one, you didn't include jquery (and don't forget to insert it before the bootstrap one)

I did a fiddle here and I add your <input id="myInput" /> into your modal and it seems to work pretty well : https://jsfiddle/9hxo6x88/

Hope it's help

本文标签： javascriptBootstrap modal window not showingStack Overflow

版权声明：本文标题：javascript - Bootstrap modal window not showing - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1745535861a2662268.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - Bootstrap modal window not showing - Stack Overflow

2 Answers 2

更多相关文章