Bootstrap popup when double click a table row

12,771

Solution 1

Try this code:

$('tr').on('dblclick', function() {
    $('#addModal').modal('show');
});

Since modal is already initialized by data attibutes on the button (data-target="#addModal"), you just need to bind dblclick event and show modal with .modal('show') method.

Demo: http://plnkr.co/edit/J0SuQdy00dcf9baE7xJu?p=preview

Solution 2

Bind double click event on table row and fire 'show' of bootstrap modal in its callback.

It should be something like --

$('tr').dblclick(function(){
$('#addModal').modal('show');
})

Solution 3

This should work :) listen to double click and after that trigger modal manualy.

 $('.table-row').on('dblclick', function(){
       $('#addModal').modal('show')
    });

Source: http://getbootstrap.com/javascript/#modals

Share:
12,771
Asanka sanjaya
Author by

Asanka sanjaya

Updated on June 28, 2022

Comments

  • Asanka sanjaya
    Asanka sanjaya over 1 year

    I'm have a bootstrap pop up box using this code.

    <a class="btn btn-default" data-toggle="modal" data-target="#addModal"> test</a>
    

    It is working without having any issue. Now I need to do the same(Appear the same pop up) when user double click on a table row which is in the same page. How can I do this?

    • Mouser
      Mouser over 8 years
      Element.addEventListener("dblclick" function(){ ...load bootstrap modal here... }, false) Where element is your table row.
    • Asanka sanjaya
      Asanka sanjaya over 8 years
      @Mouser- thank you for your answer. What do you mean by "...load bootstrap modal here..." section?
    • Mouser
      Mouser over 8 years
      Well you need to invoke the modal dialog there with code. Otherwise nothing happens when you double click on the table row.
    • Asanka sanjaya
      Asanka sanjaya over 8 years
      @Mouser - thank you so much
  • innovation
    innovation over 8 years
    can you help me my question please ? CLICK