Show popup on double click of Textbox
Question
I have a gridview with few columns with textboxes in each column
For Ex
-------------------------------------------
| Row1 | Row2 | Row3 |
-------------------------------------------
| TextBox1 | TextBox2 | TextBox3 |
-------------------------------------------
HTML :
<Columns>
<asp:TextBox ID="TextBox1" runat="server" CssClass="openPopup"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" CssClass="openPopup"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server" CssClass="openPopup"></asp:TextBox>
</Columns>
When I double click on the textbox with different ID s I want to display a bootstrap modal popup
I have tried this but it is not working
<script type="text/javascript">
$(document).ready(function(){
$('.openPopup').dblclick(function () {
$('#Div2').modal('show');
});
});
</script>
1 answers
solution1
0 2015-08-28 17:17:51
You can make use of the bootstrap modal to create the popup. Then bind to whichever class or id you wish inside the modal to display the passing data. Finally, inside the modal use $(e.target).html() to grab the double clicked data.
I strongly recommend, if you can, making use of angularJS or backboneJS to help you create a better UI experience on the front end.
$('tr').on('dblclick', function(e) { $('#addModal').modal('show'); $(".modal-body #dataToDisplay").text($(e.target).html()); });
<!DOCTYPE html> <html> <head> <script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <h1 id="dataToDisplay"></h1> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <table class="table table-bordered"> <tr> <td>1st Table Row</td> <td>2nd Table Row</td> </tr> </table> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.