jQuery를 사용하여 Bootstrap 모달 창을 여는 방법은 무엇입니까?
Twitter Bootstrap 모달 창 기능을 사용하고 있습니다. 누군가 내 양식에서 제출을 클릭하면 양식에서 "제출 버튼"을 클릭하면 모달 창이 표시됩니다.
<form id="myform" class="form-wizard">
<h2 class="form-wizard-heading">BootStap Wizard Form</h2>
<input type="text" value=""/>
<input type="submit"/>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
jQuery :
$('#myform').on('submit', function(ev) {
$('#my-modal').modal({
show: 'false'
});
var data = $(this).serializeObject();
json_data = JSON.stringify(data);
$("#results").text(json_data);
$(".modal-body").text(json_data);
// $("#results").text(data);
ev.preventDefault();
});
부트 스트랩에는 모달에서 수동으로 호출 할 수있는 몇 가지 기능이 있습니다.
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
자세한 내용은 여기에서 확인할 수 있습니다. Bootstrap 모달 구성 요소
특히 방법 섹션 .
따라서 변경해야합니다.
$('#my-modal').modal({
show: 'false'
});
에:
$('#myModal').modal('show');
나만의 맞춤 팝업을 만들려면 다음은 다른 커뮤니티 회원의 추천 동영상입니다.
https://www.youtube.com/watch?v=zK4nXa84Km4
또한 데이터 속성을 통해 사용할 수 있습니다.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
이 특별한 경우에는 자바 스크립트를 작성할 필요가 없습니다.
자세한 내용은 http://getbootstrap.com/2.3.2/javascript.html#modals에서 볼 수 있습니다.
Most often, when $('#myModal').modal('show'); doesn't work, it's caused by having included jQuery twice. Including jQuery 2 times makes modals not to work.
Remove one of the links to make it work again.
Furthermore, some plugins cause errors too, in this case add
jQuery.noConflict();
$('#myModal').modal('show');
Just call the modal method(without passing any parameters) using jQuery selector.
Here is example:
$('#modal').modal();
If you use links's onclick function to call a modal by jQuery, the "href" can't be null.
For example:
... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">
function openModal(){
$('#myModal').modal();
}
</script>
The Modal can't show. The right code is :
<a href="#" onclick="openModal()">Open a Modal by jQuery</a>
Here is how to load bootstrap alert as soon as the document is ready. It is very easy just add
$(document).ready(function(){
$("#myModal").modal();
});
I made a demo on W3Schools.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#myModal").modal();
});
</script>
</body>
</html>Check out the complete solution here:
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h
Make sure to put libraries in required order to get result:
1- First bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js
(In other words jquery.min.js must be call before bootstrap.min.js)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I tried several methods which failed, but the below worked for me like a charm:
$('#myModal').appendTo("body").modal('show');
Try to use jQuery instead of $ sign when calling the function, it worked in my case as you can see below.
jQuery.noConflict();
jQuery('#myModal').modal('show');
jQuery.noConflict(); because when jQuery('#myModal').modal('show'); doesn't work, it's caused by having included jQuery twice. Including jQuery 2 times makes modals not to work. and it would resolve the problem in that case, as in my case it is repeating.
Further you can go to this link
Bootstrap Model Window Not Showing by Calling Through JQuery
Try
$("#myModal").modal("toggle")
To open or close the modal with id myModal.
If the above is not working then it means bootstrap.js has been overridden by some other js file. Here is a solution
1:- Move bootstrap.js to the bottom so that it will override other js files.
2:- Make sure the order is like below
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>
<form id="myform" class="form-wizard">
<h2 class="form-wizard-heading">BootStap Wizard Form</h2>
<input type="text" value=""/>
<input type="submit" id="submitButton"/>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
You can launch the modal with the code below this.
$(document).ready(function(){
$("#submitButton").click(function(){
$("#myModal").modal();
});
});
Try This
myModal1 is the id of modal
$('#myModal1').modal({ show: true });
참고URL : https://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using-jquery
'code' 카테고리의 다른 글
| IEnumerable의 foreach에 해당하는 LINQ (0) | 2020.09.30 |
|---|---|
| Git에서 로컬 분기를 원격 분기로 완전히 바꾸는 방법은 무엇입니까? (0) | 2020.09.30 |
| Git의 특정 개정판에서 단일 파일을 검색하는 방법 (0) | 2020.09.29 |
| 선택한 요소의 외부 HTML 가져 오기 (0) | 2020.09.29 |
| JavaScript를 사용하여 텍스트 입력 필드의 값을 어떻게 얻습니까? (0) | 2020.09.29 |