admin管理员组

文章数量:1237500

I wonder why my Bootstrap 4 modal is not working. Any clue? I literally copy and paste from the Bootstrap 4 website () Also, I have added js that they say.

Please find below the code.

Thanks

I have checked other posts and I didn't have luck

$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus()
})
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta content="Description" name="description">
  <meta content="index,follow" name="robots">
  <link href="/images/myicon.png" rel="icon" type="image/png">
  <title>TITLE HERE</title>
  <!--CSS-->
  <link href=".0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

  <!--Bootstrap CSS JS-->
  <!--fonts-->

  <link rel="stylesheet" href=".css/3.5.2/animate.min.css">
</head>

<body>

  <!--CB-modal -->
  <!-- Button trigger modal -->
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

</body>
<!-- JS code -->
<script src=".1.1.min.js">
</script>
<script src=".4.0/js/tether.min.js">
</script>
<script src=".0.0-alpha.6/js/bootstrap.min.js">
</script>
<!--JS below-->


<!--modal-->
<script>
  $(document).ready(function() {
  $("#MyModal").modal();
  });
  })
</script>



</html>

I wonder why my Bootstrap 4 modal is not working. Any clue? I literally copy and paste from the Bootstrap 4 website (http://v4-alpha.getbootstrap./ponents/modal/#live-demo) Also, I have added js that they say.

Please find below the code.

Thanks

I have checked other posts and I didn't have luck

$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus()
})
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta content="Description" name="description">
  <meta content="index,follow" name="robots">
  <link href="/images/myicon.png" rel="icon" type="image/png">
  <title>TITLE HERE</title>
  <!--CSS-->
  <link href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

  <!--Bootstrap CSS JS-->
  <!--fonts-->

  <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

<body>

  <!--CB-modal -->
  <!-- Button trigger modal -->
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

</body>
<!-- JS code -->
<script src="https://code.jquery./jquery-3.1.1.min.js">
</script>
<script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<!--JS below-->


<!--modal-->
<script>
  $(document).ready(function() {
  $("#MyModal").modal();
  });
  })
</script>



</html>

  • javascript
  • jquery
  • html
  • twitter-bootstrap
Share Improve this question edited Jun 3, 2017 at 9:38 Sankar 7,1072 gold badges34 silver badges56 bronze badges asked Feb 24, 2017 at 11:51 user5638822user5638822 3
  • 1 It says in the console that you have a syntax error. Try to run your code snippet, you'll see it too. – Just a student Commented Feb 24, 2017 at 11:54
  • you have specified $("#MyModal") selector and your modal id is id="myModal" correct it. also data-target="#exampleModal" is wrong as your modal id is "myModal" – xurca Commented Feb 24, 2017 at 11:59
  • This mistake actually appears to be in made in the v4 documentation. Not difficult to catch if you're paying attention but annoying that copy/pasting pure example doesn't work. – rob Commented Nov 19, 2017 at 19:08
Add a ment  | 

8 Answers 8

Reset to default 11

There are typo in your snippet (unused }); at the end), but most importantly your toggle button is targeting the wrong modal id. Make sure data-target is the id of the modal you're targeting:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Demo: 

$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus()
})
<link href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/animate.css/3.5.2/animate.min.css">

<!--CB-modal -->
<!-- Button trigger modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- JS code -->
<script src="https://code.jquery./jquery-3.1.1.min.js">
</script>
<script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<!--JS below-->


<!--modal-->
<script>
  $(document).ready(function() {
    $("#myModal").modal();
  });
</script>



</html>

Edit: Updated Bootstrap 4-beta as per @OlavT request:

$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus()
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/animate.css/3.5.2/animate.min.css">

<!--CB-modal -->
<!-- Button trigger modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- JS code -->
<script src="https://code.jquery./jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!--JS below-->


<!--modal-->
<script>
  $(document).ready(function() {
    $("#myModal").modal();
  });
</script>



</html>

You have some script error and your data-target="#exampleModal" does not match with the model's ID

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta content="Description" name="description">
  <meta content="index,follow" name="robots">
  <link href="/images/myicon.png" rel="icon" type="image/png">
  <title>TITLE HERE</title>
  <!--CSS-->
  <link href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

  <!--Bootstrap CSS JS-->
  <!--fonts-->

  <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

<body>

  <!--CB-modal -->
  <!-- Button trigger modal -->
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

</body>
<!-- JS code -->
<script src="https://code.jquery./jquery-3.1.1.min.js">
</script>
<script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<!--JS below-->


<!--modal-->
<script>
  $(document).ready(function() {
     $("#MyModal").modal();
     $('#myModal').on('shown.bs.modal', function() {
        $('#myInput').focus();
     });
  });
</script>



</html>

<script>
  $(document).ready(function() {
     $("#MyModal").modal();
     $('#myModal').on('shown.bs.modal', function() {
        $('#myInput').focus();
     });
  });
</script>

I landed here because I was having the same error. After going back and reading a bit. I ran into the following:

If you’re using our piled JavaScript, don’t forget to include CDN versions of jQuery and Popper.js before it.

Because I downloaded bootstrap 4 and copied the folders as I used to with bootstrap v3, I assumed it was all going to work.

Download section has the CDN for popper and jQuery

https://getbootstrap./docs/4.0/getting-started/download/

hope this helps... Nessio

Looks like the data-target name you entered in not correct. Here is the correct code of your button

     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

your data target is wrong: #exampleModal, should be #myModal.

also, you have incorrect syntax in your js code

$(document).ready(function() {
  $("#MyModal").modal();
  });
  })//remove this


$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus()
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta content="Description" name="description">
  <meta content="index,follow" name="robots">
  <link href="/images/myicon.png" rel="icon" type="image/png">
  <title>TITLE HERE</title>
  <!--CSS-->
  <link href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

  <!--Bootstrap CSS JS-->
  <!--fonts-->

  <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

<body>

  <!--CB-modal -->
  <!-- Button trigger modal -->
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

</body>
<!-- JS code -->
<script src="https://code.jquery./jquery-3.1.1.min.js">
</script>
<script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<!--JS below-->


<!--modal-->
<script>
  $(document).ready(function() {
  $("#MyModal").modal();
  });
</script>



</html>

I faced the same error but for a different reason(...rather silly). I was using thymeleaf layout and accidentally put the modal div outside the content fragment.

<div layout:fragment="content">
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#someId">Open</button>
...
</div>
<div class="modal" id="someId">
</div>

So, although the modal div was present in the code, it was not rendered on the DOM(checked with View Page Source). It fails silently without any errors/warnings. Please ensure that the modal div is rendered on the DOM.

My issue was exactly explained here. https://stackoverflow./a/49039205/9855327 In my case, it is not related with wrong references id, it was because I created a modal inside a table in a loop in C# / Aspnet MVC. Se I created a modal for each table row.

I just inserted the code below at the end body tag:

<script>
jQuery(document).ready(function () {
   jQuery("body").children().first().before($(".modal"));
});
</script>

It will move all modals HTML elements to the beginning of the body and for me was enough.

本文标签： javascriptWhy does my modal not work Bootstrap4Stack Overflow

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