Bootstrap 4模式不起作用？

-3

我用bootstrap创建模态的例子，但没有任何反应？！点击按钮，什么都没有...Bootstrap 4模式不起作用？

bootstrap的脚本src是在jquery src下？

And this example.

有一个愉快的一天。

来源

2017-07-28 MilosN

顺便说一句。我使用bootstrap'开始'的普通代码结构... – MilosN

我们无法解决我们无法查看的代码。您将需要发布您的代码。 –

因为没有什么可以看到的，所以我的回答是从你的问题[得到它]。（https://v4-alpha.getbootstrap.com/components/modal/#live-demo） –

$('#myModal').on('shown.bs.modal', function() { 
 
    $('#myInput').focus() 
 
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/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.com/jquery-3.1.1.min.js"> 
 
</script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> 
 
</script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"> 
 
</script> 
 
<!--JS below--> 
 

 

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

 

 

 
</html>

来源

2017-07-28 13:41:57 EPI

<!DOCTYPE html> 
 
<title>My Example</title> 
 

 
<!-- Bootstrap 4 alpha CSS --> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> 
 

 
<style> 
 
body { 
 
padding-top: 1em; 
 
} \t 
 
</style> 
 

 
<div class="container-fluid"> 
 
\t \t 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#flipFlop"> 
 
Click Me 
 
</button> 
 

 
<!-- The modal --> 
 
<div class="modal fade" id="flipFlop" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> 
 
<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="modalLabel">Flip-flop</h4> 
 
</div> 
 
<div class="modal-body"> 
 
A type of open-toed sandal. 
 
</div> 
 
<div class="modal-footer"> 
 
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 

 
</div> 
 
\t \t 
 
<!-- jQuery library --> 
 
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 

 
<!-- Tether --> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
    
 
<!-- Bootstrap 4 Alpha JS --> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 
<!-- Initialize Bootstrap functionality --> 
 
<script> 
 
// Initialize tooltip component 
 
$(function() { 
 
    $('[data-toggle="tooltip"]').tooltip() 
 
}) 
 

 
// Initialize popover component 
 
$(function() { 
 
    $('[data-toggle="popover"]').popover() 
 
}) 
 
</script>

检查TMY代码片段一次。你是否完全像https://v4-alpha.getbootstrap.com/components/modal/#live-demo？我想你忘了添加tether.min.js文件到你的例子中。

来源

2017-07-28 13:20:09 soverflow77

Bootstrap 4模式不起作用？

回答

相关问题