显示弹出框上双击文本框

Show popup on double click of Textbox

本文关键字：双击 文本 显示      更新时间：2023-09-26

我有一个gridview，有几个列，每个列有textboxes

为例 

                -------------------------------------------
                | 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>

当我在textbox上double click与不同的ID s时，我想显示bootstrap模式弹出

我已经试过了，但是不工作

<script type="text/javascript">
        $(document).ready(function(){
            $('.openPopup').dblclick(function () {
                $('#Div2').modal('show');
            });
        });
        </script>

您可以使用引导程序modal来创建弹出窗口。然后绑定到您希望在模态中显示传递数据的class或id。最后，在模态中使用$(e.target).html()来获取双击的数据。

我强烈建议，如果可以的话，使用angularJS或backboneJS来帮助你在前端创建更好的UI体验。

$('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>

相关文章：