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

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

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

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

Zim
Редактировал вопрос 26-го апреля 2018 в 11:28
Программирование
modal-dialog ajax twitter-bootstrap-3 twitter-bootstrap
29-го октября 2013 в 4:08
26 просмотров

На самом деле это очень просто, нужно лишь немного добавить 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 (на основе официального примера):


<a href="remoteContent.html" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default">
    Launch Modal
</a>


<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">
        <span aria-hidden="true">×</span>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        Close
        Save changes
      </div>
    </div>
  </div>
</div>

Попробуйте сами: https://jsfiddle.net/ednon5d1/

marcovtwout
Редактировал ответ 6-го августа 2015 в 2:13
Комментарии (7)
Решение

Проверьте этот ответ SO.

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

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

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

Community
Редактировал ответ 23-го мая 2017 в 11:54
Комментарии (0)

Полагаю, вы ищете эту пользовательскую функцию. Она принимает атрибут data-toggle и динамически создает необходимый 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">
            ×
            <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>
</div>
Pratik Gadoya
Редактировал ответ 20-го августа 2014 в 9:16
Комментарии (1)

В случае если вам нужно обновить один и тот же модальный с контент из разных Аякс / 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 демо

Zim
Редактировал ответ 26-го апреля 2018 в 11:43
Комментарии (1)

Простой способ использовать это с eModal!

Из бывших на GitHub:

  1. Ссылка на eModal.js в <скрипт СРЦ=" по - //rawgit.com/saribe/eModal/master/dist/eModal.min.js"></скрипт>
  2. использовать eModal для отображения модального для оповещения, Аякс, подскажите или подтвердите

// Отобразить уведомление модала с названием По умолчанию (внимание) eModal.Аякс('Ваш/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>




<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>

            </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>

            </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>

            </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>

            </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>

            </div>
        </div>
    </div>
    <div class="col-sm-1 text-center"></div>
</div>

в

Samuel Pinto
Редактировал ответ 4-го декабря 2015 в 3:48
Комментарии (2)

создать пустое модальное окно на текущей странице и ниже-это AJAX-вызов, вы можете увидеть, как загрузки содержимого, в результате из другой HTML-страницы.

 $.ajax({url: "registration.html", success: function(result){
            //alert("success"+result);
              $("#contentBody").html(result);
            $("#myModal").modal('show'); 

        }});

после того, как вызов будет сделано, вы получите содержание страницы по результату, то вы можете вставить код в модальное вы'содержимое код, используя.

Вы можете позвонить в контроллер и получить содержимое страницы, и вы можете показать, что в вашей модели.

ниже приведен пример фреймворка Bootstrap 3 модальные в том, что мы загружаем содержимое от страницы registration.html ...

index.html
------------------------------------------------



  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <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>




Load me


<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">


    <div class="modal-content" >
      <div class="modal-header">
        ×
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body" id="contentBody">

      </div>
      <div class="modal-footer">
        Close
      </div>
    </div>

  </div>
</div>




registration.html
-------------------- 



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;
}



<h2>CSS Newsletter</h2>


  <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>

      <input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter

  </div>

  <div class="container">
    <input type="submit" value="Subscribe">
  </div>
Saqib A. Azhar
Редактировал ответ 18-го июля 2018 в 12:01
Комментарии (1)