Bootstrap 3 - Как загрузить контент в модальном теле через AJAX?

Как вы можете видеть здесь, у меня есть кнопка, запускающая модальную. Установка URL-адреса href для кнопки, этот URL-адрес автоматически загружается в модальный с помощью Bootstrap 3. Дело в том, что эта страница загружается в модальный корень (как сказано в документации bootstrap 3 для использования модалов). Я хочу загрузить его в модальное тело.

Есть ли способ сделать это с помощью атрибутов (а не javascript)? Или какой самый автоматический способ сделать это?

P.S. Я помню, что в Bootstrap 2 содержимое загружалось в тело, а не в корневой каталог.

Ответ 1

Отметьте этот ответ SO.

Похоже, что единственный способ - обеспечить всю модульную структуру вашим ответом ajax.

Как вы можете проверить из исходного кода функция загрузки привязана к корневому элементу.

Если вы не можете изменить ответ ajax, простым обходным путем может быть явный вызов плагина $(..).modal(..) в вашем элементе body, хотя он, вероятно, сломает функции show/hide корневого элемента.

Ответ 2

На самом деле это просто супер, просто добавив javascript. Ссылка href используется как источник содержимого ajax. Обратите внимание, что для Bootstrap 3. * мы устанавливаем data-remote="false" для отключения функции устаревшей загрузки Bootstrap.

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/

Ответ 3

Я думаю, вы ищете эту настраиваемую функцию. Он принимает атрибут "перетаскивание данных" и динамически создает необходимый div для размещения удаленного контента. Просто поместите data-toggle = "ajaxModal" на любую ссылку, которую вы хотите загрузить через AJAX.

Часть 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 -->

Ответ 4

Простым способом использования модалов является eModal!

Ex из 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\ 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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/united/bootstrap.min.css'; return false;" rel="stylesheet" >
<link href="#" onclick="location.href='http//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css'; return false;" 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>