0

I tried today with modal windows on Bootstrap, but I have a problem. Modal won't show. I did exactly as shown in getbootstrap.com/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.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

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

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/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>
RIYAJ KHAN
  • 15,032
  • 5
  • 31
  • 53
  • what happens if you remove the ` – Cᴏʀʏ Jan 20 '16 at 01:57
  • Bootstrap and your script requires jQuery and you didn't loaded – blurfx Jan 20 '16 at 02:02
  • Can you please explain how to load it? I'm new at this. xD –  Jan 20 '16 at 02:06
  • go https://developers.google.com/speed/libraries/#jquery and put 1.x snippet script between and of your code. – blurfx Jan 20 '16 at 02:07
  • And yeah Cory, nothing happened. That –  Jan 20 '16 at 02:09

2 Answers2

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.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

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

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/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>
Steve K
  • 8,505
  • 2
  • 20
  • 35
0

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.net/9hxo6x88/

Hope it's help

Chilipote
  • 1,037
  • 1
  • 8
  • 30
  • I did that also, but still :(. Then it's the problem on me. Does it matter that I use XAMPP, because I'm doing this project in PHP, and I'm hosting it on localhost? –  Jan 20 '16 at 02:15
  • Hi @HarisBegic, No I don't think it's your it's XAMPP the problem. Did you try to move your script and add jquery ? When your open your browser console, do you have a javascript error ? If yes, what is it ? And to finish what version of jquery did you include ? – Chilipote Jan 20 '16 at 17:03