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?

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?

• javascript
• jquery
• ajax
• html
• twitter-bootstrap-3

• Element.addEventListener("dblclick" function(){ ...load bootstrap modal here... }, false) Where element is your table row. – Mouser Commented Feb 7, 2015 at 13:55
• @Mouser- thank you for your answer. What do you mean by "...load bootstrap modal here..." section? – Asanka Herath Commented Feb 7, 2015 at 13:57
• Well you need to invoke the modal dialog there with code. Otherwise nothing happens when you double click on the table row. – Mouser Commented Feb 7, 2015 at 13:58

3 Answers 3

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

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

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

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

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