Это начало
$('#page-selection').bootpag({
total: 10,
href: "#pro-page-{{number}}"
}).on("page", function(event, /* page number here */ num) {
$("#content").html("Page " + num); // some ajax content loading...
});
$(function() {
$("#page-selection .pagination.bootpag li a")
.attr('data-toggle', 'modal')
.attr('data-target', '#myModal');
});
<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootpag/1.0.7/jquery.bootpag.js"></script>
<div id="content"></div>
<div id="page-selection"></div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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 id="phpContent"></div>
</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>
Приложение к оператору Комментарий:
Я должен использовать ссылку, чтобы открыть модальную страницу, каждая модальная страница являетсярезультат запроса по идентификатору в href, например: idssr ")?>">.Как я могу сделать это так?
Первый скрипт php на стороне сервера.Таким образом, все ваши ссылки известны к моменту отображения страницы.Bootpag рендерит клиентскую сторону динамически, поэтому в идеале было бы неплохо, если бы при инициализации вы могли отобразить определенную php-конструкцию javascript, чтобы init-bootpag мог получить доступ для сопоставления URL-адресов с кнопками пейджера
Один из способов сделать это - написатьнекоторый php-скрипт, который создает простой объект javascript, такой, что конечный результат выглядит следующим образом:
var pagerUrls = {
"1": "url1",
"2": "url2",
"3": "url3",
...
"n": "urln"
};
Тогда во время инициализации вы можете сделать это:
$(function() {
$("#page-selection .pagination.bootpag li a")
.attr('data-toggle', 'modal')
.attr('data-target', '#myModal');
$("#page-selection .pagination.bootpag li a")
.each( function(){
$(this).data('url', pagerUrls[ $(this).data("lp") ] );
});
});
С помощью кнопок теперь вы можете установитьможно использовать «запущенный модал», см. Изменение модального содержимого на основе кнопки триггера для получения дополнительной информации.
Это позволит одному модалу отображать динамический контент на основе кнопки триггера.В нем используется событие Bootstrap Modal show.bs.modal, которое я здесь использую для вызова ajax на основе заданного URL.
Примечание: этот вызов ajax упрощен, так как я понятия не имею, что возвращают ваши URLЯ полагаю, html, но вам нужно будет установить соответствующие настройки ajax для ваших нужд.
$('#myModal').on('show.bs.modal', function (event) {
// Button that triggered the modal
var button = $(event.relatedTarget);
var ajaxOptions = {
url: button.data('url'),
method: "POST",
dataType: "html"
};
var request = $.ajax(ajaxOptions);
var modal = $(this);
modal.find('.modal-title').text('Results from ' + ajaxOptions.url );
modal.find('.modal-body #phpContent').val(request);
});
Примечание: ни один из этого кода не проверен и предназначен только дляпоказать концепцию.вам придется приложить усилия для его отладки.
Но теперь у меня к вам вопрос.
Это МНОГО усилий, чтобы использовать модал для отображения динамического контента, когдавы считаете, что bootpag предназначен для заполнения div именно этим.
Есть ли причина, по которой вы используете модал?
Счастливого программирования!