Question

我的gridview列数很少，每列<{1}}

对于Ex

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> double click textbox ID我想显示bootstrap模态弹出窗口

我试过这个但是没有用

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

Answer 1

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

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

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

双击文本框显示弹出窗口

1 个答案: