Question

想要在webbrowser的中心显示模态窗口，并显示用户点击的bootstrap td行中的用户信息。你能帮我吗？下面找我当前的代码。我找不到方法

下面你看到我把tr作为模态并将data-id放到1：

....
<tbody>
   @For Each item In Model.Transports
        Dim currentItem = item
           @<tr data-toggle="modal" data-id="1" data-target="#orderModal">

 <td class="col-lg-4 text-center vert-align_td">@item.Name</td>
 <td class="col-lg-4 text-center vert-align_td">@item.Surname</td>
 <td class="col-lg-4 text-center vert-align_td">@item.Age</td>
....

继承我的模态窗口，我想要输入所有信息：

@<div id="orderModal" class="modal hide fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>

        Information for lp number: 

        Name: 
        Surname:
        Age: 

    </div>
    <div id="orderDetails" class="modal-body"></div>
    <div id="orderItems" class="modal-body"></div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

这是我的JS：

 $(function () {
        $('#orderModal').modal({
            keyboard: true,
            backdrop: "static",
            show: false,

        }).on('show', function () {
            var getIdFromRow = $(event.target).closest('tr').data('Lp');
            //make your ajax call populate items or what even you need
            $(this).find('#orderDetails').html($('<b> Information for LP: ' + getIdFromRow + '</b>'))
        });
    });

已编辑（进一步讨论：）

...

@For Each item In Model.Transports
   Dim currentItem = item
     @<tr data-toggle="modal" data-target="#myModal" data-id="12">
        <td class="col-lg-1">@item.Lp</td>
        <td class="col-lg-1">@item.Name</td>

模态：

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body" id="orderDetails">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

JS：

 $('#myModal').on('show.bs.modal', function (event) {
        //var getIdFromRow = $(event.relatedTarget).attr('data-id');
        // if you wnat to take the text of the first cell 
        var getIdFromRow1 = $(event.relatedTarget).find('td:first-child').text();
        var getIdFromRow2 = $(event.relatedTarget).find('td:second-child').text();
        $(this).find('#orderDetails').html($('<b> Information for LP: ' + getIdFromRow1 + '</b>'))
        $(this).find('#orderDetails').html($('<b> Information for DataPrzyjazdu: ' + getIdFromRow2 + '</b>'))
    });

EDIT2：

 $('#myModal').on('show.bs.modal', function (event) {
        var getIdFromRow1 = $(event.relatedTarget).find('td:first-child').text();
        $(this).find('#orderDetails').html($('<b> Information for Lp: ' + getIdFromRow1 + '</b>'))

        var getIdFromRow2 = $(event.relatedTarget).find('td:nth-child(2)').text();
        $(this).find('#orderDetails').html($('<b> Information for Data przyjazdu: ' + getIdFromRow2 + '</b>'))
    });

模态：

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body" id="orderDetails">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

表：

 @<tr data-toggle="modal" data-target="#myModal" data-id="12">


    <td class="col-lg-1 text-center vert-align_td">@item.Lp</td>
<td class="col-lg-1 text-center vert-align_td">@item.DataPrzyjazdu</td>

Answer 1

您的代码存在一些问题：

您应该使用show.bs.modal事件代替show事件。 docs。
您应该使用$(event.relatedTarget)（返回tr）而不是$(event.target)（返回modal）。

＆＃13;

$('#myModal').on('show.bs.modal', function (event) {
    //var getIdFromRow = $(event.relatedTarget).attr('data-id');
    // if you wnat to take the text of the first cell 
    var getIdFromRow = $(event.relatedTarget).find('td:first-child').text();
    $(this).find('#orderDetails').html($('<b> Information for LP: ' + getIdFromRow + '</b>'))
});

＆＃13;

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Col 3</th>
        <th>Col 4</th>
    </tr>
    <tr data-toggle="modal" data-target="#myModal" data-id="12">
        <td>ID is 12</td>
        <td>Col 2</td>
        <td>Col 3</td>
        <td>Col 4</td>
    </tr>
</table>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body" id="orderDetails">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

＆＃13;

Bootstrap如何在模态窗口

1 个答案: