부트스트랩3 - AJAX를 통해 모달바디에 콘텐츠를 로드하는 방법

programing

부트스트랩3 - AJAX를 통해 모달바디에 콘텐츠를 로드하는 방법

fastcode 2023. 3. 31. 22:53

부트스트랩3 - AJAX를 통해 모달바디에 콘텐츠를 로드하는 방법

여기 보시는 것처럼 모달 부팅 버튼이 있습니다.이 URL 버튼의 href URL 설정은 부트스트랩3에 의해 자동으로 모달로 로드됩니다.사실 이 페이지는 모달루트에 로드됩니다(모달 사용에 대해서는 부트스트랩3 매뉴얼에 기재되어 있습니다).대신 modal-body에 로드하고 싶습니다.

속성(javascript 이외)으로 하는 방법이 있습니까?아니면 가장 자동적인 방법은 무엇일까요?

추신: Bootstrap 2에서 콘텐츠가 루트가 아닌 본문에 로드된 것으로 기억합니다.

javascript를 조금만 추가하면 매우 간단합니다.링크의 href는 Ajax 콘텐츠소스로 사용됩니다.Bootstrap 3.*에 대해서는data-remote="false"사용되지 않는 부트스트랩로드 기능을 디세블로 합니다.

JavaScript:

// 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"));
});

Html(공식 예제에 근거):

<!-- 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">&times;</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/

이 SO를 확인하세요.

유일한 방법은 전체 모달 구조를 당신의 아약스 응답으로 제공하는 것 같습니다.

부트스트랩 소스 코드에서 확인할 수 있듯이 로드 함수는 루트 요소에 바인딩되어 있습니다.

Ajax 응답을 수정할 수 없는 경우 간단한 회피책은 이 명령어를 명시적으로 호출하는 것일 수 있습니다.$(..).modal(..)플러그인은 루트 요소의 표시/숨김 기능이 중단될 수 있습니다.

이 커스텀 기능을 찾고 계신 것 같습니다.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">&times;</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);
        }
    });
});

부트스트랩3 데모
부트스트랩4 데모

모달은 eModal을 사용하여 간단하게 사용할 수 있습니다.

github에서 예:

eModal.js 링크<script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>

eModal을 사용하여 경보, 에이잭스, 프롬프트 또는 확인 모달 표시

// 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">&times;</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' 카테고리의 다른 글

javax.json을 이클립스로 Import하려면 어떻게 해야 하나요? (0)	2023.03.31
ui-sref를 사용하여 버튼 태그에서 상태 트리거 (0)	2023.03.31
CRUDRepository에서 업데이트 또는 저장 업데이트 (0)	2023.03.31
Robo 3T를 사용하여 MongoDB에서 JSON을 내보내는 방법 (0)	2023.03.31
특정 클래스 또는 필드에 대한 Gson serialize null입니다. (0)	2023.03.31

현재글부트스트랩3 - AJAX를 통해 모달바디에 콘텐츠를 로드하는 방법

각종 프로그래밍 정보를 다루는 블로그입니다.

Eclipse, ios, json, reactjs, wpf, PowerShell, Git, MongoDB, sql-server, Windows, Swift, Excel, bash, angularJS, typescript, Azure, Ajax, Oracle, Spring-boot, wordpress,

Today :
Yesterday :

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

fastcode

부트스트랩3 - AJAX를 통해 모달바디에 콘텐츠를 로드하는 방법

부트스트랩3 - AJAX를 통해 모달바디에 콘텐츠를 로드하는 방법

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

부트스트랩3 - AJAX를 통해 모달바디에 콘텐츠를 로드하는 방법

부트스트랩3 - AJAX를 통해 모달바디에 콘텐츠를 로드하는 방법

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바