반응형
Bootstrap 3-AJAX를 통해 모달 본문에 콘텐츠를로드하는 방법은 무엇입니까?
여기 에서 볼 수 있듯이 모달을 시작하는 버튼이 있습니다. 버튼에 대한 href URL 설정이 URL은 Bootstrap 3에 의해 자동으로 모달에로드됩니다. 사실이 페이지는 모달 루트에로드됩니다 (모달 사용법 에 대한 부트 스트랩 3 문서 에서 언급 했듯이 ). 대신 modal-body에로드하고 싶습니다.
속성 (JavaScript가 아님)을 통해 수행하는 방법이 있습니까? 아니면이를 수행하는 가장 자동적 인 방법은 무엇입니까?
추신 : Bootstrap 2에서 내용은 루트가 아닌 본문에로드되었습니다.
이 SO 대답을 확인하십시오 .
유일한 방법은 ajax 응답으로 전체 모달 구조를 제공하는 것 같습니다.
부트 스트랩 소스 코드 에서 확인할 수 있듯이 로드 기능은 루트 요소에 바인딩됩니다.
ajax 응답을 수정할 수없는 경우 간단한 해결 방법은 $(..).modal(..)루트 요소의 표시 / 숨기기 기능을 중단하더라도 body 요소 에서 플러그인을 명시 적으로 호출 하는 것입니다.
이것은 실제로 약간의 자바 스크립트를 추가하면 매우 간단합니다. 링크의 href는 ajax 콘텐츠 소스로 사용됩니다. Bootstrap 3. *의 data-remote="false"경우 더 이상 사용되지 않는 Bootstrap로드 기능 을 비활성화하도록 설정 했습니다 .
자바 스크립트 :
// Fill modal with content from link href
$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
<!-- Link trigger modal -->
<a href="remoteContent.html" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default">
Launch Modal
</a>
<!-- Default bootstrap modal example -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</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>
직접 시도해보세요 : https://jsfiddle.net/ednon5d1/
이 사용자 지정 함수를 찾고있는 것 같습니다. data-toggle 속성을 사용하고 원격 콘텐츠를 배치하는 데 필요한 div를 동적으로 생성합니다. AJAX를 통해로드하려는 링크에 data-toggle = "ajaxModal"을 배치하기 만하면됩니다.
JS 부분 :
$('[data-toggle="ajaxModal"]').on('click',
function(e) {
$('#ajaxModal').remove();
e.preventDefault();
var $this = $(this)
, $remote = $this.data('remote') || $this.attr('href')
, $modal = $('<div class="modal" id="ajaxModal"><div class="modal-body"></div></div>');
$('body').append($modal);
$modal.modal({backdrop: 'static', keyboard: false});
$modal.load($remote);
}
);
마지막으로 원격 콘텐츠에서 전체 구조를 작동시켜야합니다.
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a href="#" class="btn btn-white" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Button</a>
<a href="#" class="btn btn-primary">Another button...</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
다른 Ajax / API 호출의 콘텐츠로 동일한 모달을 업데이트해야하는 경우 여기에 작동하는 솔루션이 있습니다.
$('.btn-action').click(function(){
var url = $(this).data("url");
$.ajax({
url: url,
dataType: 'json',
success: function(res) {
// get the ajax response data
var data = res.body;
// update modal content here
// you may want to format data or
// update other modal elements here too
$('.modal-body').text(data);
// show modal
$('#myModal').modal('show');
},
error:function(request, status, error) {
console.log("ajax call went wrong:" + request.responseText);
}
});
});
모달을 사용하는 간단한 방법은 eModal 을 사용하는 것입니다 !
예 github에서 :
- eModal.js 링크
<script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script> eModal을 사용하여 경고, ajax, 프롬프트 또는 확인을위한 모달 표시
// Display an alert modal with default title (Attention) eModal.ajax('your/url.html');
$(document).ready(function () {/* activate scroll spy menu */
var iconPrefix = '.glyphicon-';
$(iconPrefix + 'cloud').click(ajaxDemo);
$(iconPrefix + 'comment').click(alertDemo);
$(iconPrefix + 'ok').click(confirmDemo);
$(iconPrefix + 'pencil').click(promptDemo);
$(iconPrefix + 'screenshot').click(iframeDemo);
///////////////////* Implementation *///////////////////
// Demos
function ajaxDemo() {
var title = 'Ajax modal';
var params = {
buttons: [
{ text: 'Close', close: true, style: 'danger' },
{ text: 'New content', close: false, style: 'success', click: ajaxDemo }
],
size: eModal.size.lg,
title: title,
url: 'http://maispc.com/app/proxy.php?url=http://loripsum.net/api/' + Math.floor((Math.random() * 7) + 1) + '/short/ul/bq/prude/code/decorete'
};
return eModal
.ajax(params)
.then(function () { alert('Ajax Request complete!!!!', title) });
}
function alertDemo() {
var title = 'Alert modal';
return eModal
.alert('You welcome! Want clean code ?', title)
.then(function () { alert('Alert modal is visible.', title); });
}
function confirmDemo() {
var title = 'Confirm modal callback feedback';
return eModal
.confirm('It is simple enough?', 'Confirm modal')
.then(function (/* DOM */) { alert('Thank you for your OK pressed!', title); })
.fail(function (/*null*/) { alert('Thank you for your Cancel pressed!', title) });
}
function iframeDemo() {
var title = 'Insiders';
return eModal
.iframe('https://www.youtube.com/embed/VTkvN51OPfI', title)
.then(function () { alert('iFrame loaded!!!!', title) });
}
function promptDemo() {
var title = 'Prompt modal callback feedback';
return eModal
.prompt({ size: eModal.size.sm, message: 'What\'s your name?', title: title })
.then(function (input) { alert({ message: 'Hi ' + input + '!', title: title, imgURI: 'https://avatars0.githubusercontent.com/u/4276775?v=3&s=89' }) })
.fail(function (/**/) { alert('Why don\'t you tell me your name?', title); });
}
//#endregion
});.fa{
cursor:pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/united/bootstrap.min.css" rel="stylesheet" >
<link href="http//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row" itemprop="about">
<div class="col-sm-1 text-center"></div>
<div class="col-sm-2 text-center">
<div class="row">
<div class="col-sm-10 text-center">
<h3>Ajax</h3>
<p>You must get the message from a remote server? No problem!</p>
<i class="glyphicon glyphicon-cloud fa-5x pointer" title="Try me!"></i>
</div>
</div>
</div>
<div class="col-sm-2 text-center">
<div class="row">
<div class="col-sm-10 text-center">
<h3>Alert</h3>
<p>Traditional alert box. Using only text or a lot of magic!?</p>
<i class="glyphicon glyphicon-comment fa-5x pointer" title="Try me!"></i>
</div>
</div>
</div>
<div class="col-sm-2 text-center">
<div class="row">
<div class="col-sm-10 text-center">
<h3>Confirm</h3>
<p>Get an okay from user, has never been so simple and clean!</p>
<i class="glyphicon glyphicon-ok fa-5x pointer" title="Try me!"></i>
</div>
</div>
</div>
<div class="col-sm-2 text-center">
<div class="row">
<div class="col-sm-10 text-center">
<h3>Prompt</h3>
<p>Do you have a question for the user? We take care of it...</p>
<i class="glyphicon glyphicon-pencil fa-5x pointer" title="Try me!"></i>
</div>
</div>
</div>
<div class="col-sm-2 text-center">
<div class="row">
<div class="col-sm-10 text-center">
<h3>iFrame</h3>
<p>IFrames are hard to deal with it? We don't think so!</p>
<i class="glyphicon glyphicon-screenshot fa-5x pointer" title="Try me!"></i>
</div>
</div>
</div>
<div class="col-sm-1 text-center"></div>
</div>현재 페이지에 빈 모달 상자를 만들고 아래는 다른 html 페이지에서 결과를 가져 오는 방법을 볼 수있는 ajax 호출입니다.
$.ajax({url: "registration.html", success: function(result){
//alert("success"+result);
$("#contentBody").html(result);
$("#myModal").modal('show');
}});
호출이 완료되면 결과로 페이지의 내용을 얻은 다음 모달의 내용 ID에 코드를 삽입 할 수 있습니다.
컨트롤러를 호출하고 페이지 콘텐츠를 가져올 수 있으며 모달에 표시 할 수 있습니다.
아래는 registration.html 페이지에서 콘텐츠를로드한다는 점에서 Bootstrap 3 모달의 예입니다.
index.html
------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
function loadme(){
//alert("loadig");
$.ajax({url: "registration.html", success: function(result){
//alert("success"+result);
$("#contentBody").html(result);
$("#myModal").modal('show');
}});
}
</script>
</head>
<body>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" onclick="loadme()">Load me</button>
<!-- Modal -->
<div id="myModal" class="modal fade" 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" id="contentBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
registration.html
--------------------
<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {
border: 3px solid #f1f1f1;
font-family: Arial;
}
.container {
padding: 20px;
background-color: #f1f1f1;
width: 560px;
}
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type=checkbox] {
margin-top: 16px;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
border: none;
}
input[type=submit]:hover {
opacity: 0.8;
}
</style>
<body>
<h2>CSS Newsletter</h2>
<form action="/action_page.php">
<div class="container">
<h2>Subscribe to our Newsletter</h2>
<p>Lorem ipsum text about why you should subscribe to our newsletter blabla. Lorem ipsum text about why you should subscribe to our newsletter blabla.</p>
</div>
<div class="container" style="background-color:white">
<input type="text" placeholder="Name" name="name" required>
<input type="text" placeholder="Email address" name="mail" required>
<label>
<input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter
</label>
</div>
<div class="container">
<input type="submit" value="Subscribe">
</div>
</form>
</body>
</html>
참고 URL : https://stackoverflow.com/questions/19663555/bootstrap-3-how-to-load-content-in-modal-body-via-ajax
반응형
'Programing' 카테고리의 다른 글
| Python 읽기 전용 속성 (0) | 2020.11.01 |
|---|---|
| 스크립트를 실행할 수 없음 : 프로그램 실행을 계속하기에 메모리가 부족합니다. (0) | 2020.11.01 |
| 스크롤로 인해 반응 형 테이블 내부의 부트 스트랩 버튼 드롭 다운이 보이지 않음 (0) | 2020.11.01 |
| 인쇄 가능한 CSS를 어떻게 디버깅합니까? (0) | 2020.11.01 |
| Java에서 고유하고 짧은 파일 이름을 생성하는 가장 좋은 방법은 무엇입니까? (0) | 2020.11.01 |