title: Is it possible to launch bootstrap modal on pagination click
body: <p>I would like to acheive a goal but I do not know if it is possible. I have a pagination, instead of navigation to a new page after click I would like it to open a  modal made with bootstrap. The modal opens properly when I remove the pagination, but it cannot work with the pagination. How can I change the pagination jquery function to make both the pagination and the modal work together ?</p>
  
  <p>Or Is there another way to do that, any suggestion would be appreciated .</p>
  
  <p>Thanks</p>
  
  <p>1- Pagination</p>
  
  <pre><code>&lt;a id="pagination-obstetrico"  data-toggle="modal" data-target="#view" href="&lt;?php echo base_url("admin/data_ssr_by_id/$row-&gt;idssr")?&gt;"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>2- The modal call</p>
  
  <pre><code>&lt;div class="modal fade" id="ver_ssr"  role="dialog" &gt;
  &lt;div class="modal-dialog modal-lg" &gt;
  &lt;div class="modal-content" &gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>3- the pagination function</p>
  
  <pre><code>$('#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'
  
  });
  </code></pre>
  
  <p>5- <a href="https://i.stack.imgur.com/wQwEv.png" rel="nofollow noreferrer">External resources for the pagination</a></p>
  
  <p>6- My parent page</p>
  
  <ul>
  <li><p>The list of buttons is the pagination, the parent page is a form, the pagination is the number of times users have filled the form. When I click on a pagination link I should open a modal to edit the data relevent to the pagination id.</p></li>
  <li><p><a href="https://i.stack.imgur.com/xE21M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xE21M.png" alt="enter image description here"></a></p></li>
  </ul>
  
  <p>7- The modal shotscreen when I am not using the pagination, note that when I use the pagination the modal cannot launch.</p>
  
  <p><a href="https://i.stack.imgur.com/wQwEv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wQwEv.png" alt="enter image description here"></a></p>
  
  <p>Thanks</p>