时间戳

首页 > 解决方案 > 是否可以在分页点击时启动引导模式

jquery - 是否可以在分页点击时启动引导模式

问题描述

我想实现一个目标，但我不知道这是否可能。我有一个分页，而不是单击后导航到新页面，我希望它打开一个用引导程序制作的模式。当我删除分页时，模式会正确打开，但它不能与分页一起使用。如何更改分页 jquery 函数以使分页和模态一起工作？

或者是否有其他方法可以做到这一点，任何建议将不胜感激。

谢谢

1- 分页

<a id="pagination-obstetrico"  data-toggle="modal" data-target="#view" href="<?php echo base_url("admin/data_ssr_by_id/$row->idssr")?>"></a>

2-模态调用

<div class="modal fade" id="ver_ssr"  role="dialog" >
<div class="modal-dialog modal-lg" >
<div class="modal-content" >

</div>
</div>
</div>

3-分页功能

$('#pagination-obstetrico').twbsPagination({
totalPages: 5,
// the current page that show on start
startPage: 1,

// maximum visible pages
visiblePages: 5,

initiateStartPageClick: true,

// template for pagination links
href: false,

// variable name in href template for page number
hrefVariable: '{{number}}',

// Text labels
first: 'First',
prev: 'Previous',
next: 'Next',
last: 'Last',

// carousel-style pagination
loop: false,

// callback function
onPageClick: function (event, page) {
   $('.page-active').removeClass('page-active');
  $('#page'+page).addClass('page-active');
},

// pagination Classes
paginationClass: 'pagination',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first',
pageClass: 'page',
activeClass: 'active',
disabledClass: 'disabled'

});

5-分页的外部资源

6-我的父页面

7-我不使用分页时的模态截图，请注意，当我使用分页时，模态无法启动。

在此处输入图像描述

谢谢

标签： jquerytwitter-bootstrappagination

解决方案

这是一个开始

$('#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">&times;</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>

每个 OP 的附录评论：

我必须使用链接打开模态，每个模态页面都是根据 href 中的 id 查询的结果，例如：idssr")?>">。我该怎么做？

第一个 php 脚本是服务器端。因此，在呈现页面时，您的所有链接都是已知的。Bootpag 动态呈现客户端，因此理想情况下，如果在初始化时您可以映射一个 php 定义的 javascript 结构，bootpag init 可以访问该结构以将 url 映射到寻呼机按钮，那就太好了

一种方法是编写一些创建 javascript 简单对象的 php 脚本，最终结果如下所示：

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


    });

现在设置按钮后，您可以使用“触发模式”，请参阅基于触发按钮的不同模式内容以获取更多信息。

这将允许一个模态显示基于触发按钮的动态内容。它利用了show.bs.modal我在这里使用的 Bootstrap Modal 事件来根据给定的 url 进行 ajax 调用。

注意：这个 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完全填充 a 时，这是使用模态显示动态内容的大量努力。

您使用模态是否有原因？

快乐编程！

推荐阅读