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模式不起作用？

回答

相關問題