Question

我正在使用bootstrap v4.0.0和jQuery JavaScript Library v3.3.1。我对引导程序模态的位置及其在单击时被解雇有一些问题。它呈现完美（定位错误），并且数据也正确加载。现在这两个问题是：

无论模式大小如何，都可以将模式定位到左上角。
当我单击Modal的关闭按钮或X按钮（右上角）时，它不会被关闭。但是，如果我从模式中删除了淡入淡出类，则关闭按钮起作用。

我希望模态位于中央，其次，关闭模态按钮也应与渐变类一起使用。

我已经用静态代码（当不使用局部视图时）进行了测试，在这种情况下，它可以完美地工作而不会出现上述任何问题。我做了什么？请帮忙。

我尝试了以下代码：

------------------------父视图--------------------- ----------

<div class="modal" id="myModal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-lg">      
    </div>
</div>

------------------------------- RTI望-------------- -----------

@model Myproject.Models.mContact

<div class="modal-content">
    <div class="modal-header">
        <h3 class="modal-title">@Model.FeedbackTypeName</h3> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
    <div class="modal-body">
        <table class="table">
            <tbody>
                <tr>
                    <td><strong>Feedback Type</strong> </td>
                    <td>@Model.FeedbackTypeName</td>
                    <td><strong>Sent By</strong> </td>
                    <td>@Model.FullName</td>
                </tr>
                <tr>
                    <td><strong>Email</strong> </td>
                    <td>@Model.Email</td>
                    <td><strong>Mobile Number</strong> </td>
                    <td>@Model.MobileNo</td>
                </tr>
                <tr>
                    <td><strong>Sent Date</strong></td>
                    <td>@Model.CreatedDate</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td><strong>Message</strong> </td>
                    <td colspan="3">@Model.Message</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default " data-dismiss="modal">Close</button>        
    </div>
</div>

---------------------------------父视图上的JQUERY代码--------- ------------------

$(document).ready(function () {
    $('.fa-eye').click(function () {
            var _id = $(this).data("id");
            var _url = '@Url.Action("FeedbackDetails","Feedback", new { Area="Contact"})';

            $.ajax({
                url: _url,
                data: { "id": _id },
                dataType: 'html',
                 contentType: "application/json",
                success: function(response) {
                    //Do Something
                    $('#myModal').html('').html(response);                    
                    $('#myModal').modal('show');
                },
                error: function(xhr) {
                    //Do Something to handle error
                }
            });
        });
    });

----------------------控制器动作----------------------- -----

public PartialViewResult FeedbackDetails(string id)
    {
        mContact obj = new mContact();
        // SOME LOGIC
        return PartialView("_FeedbackDetails", obj);
    }

Answer 1

在jquery ajax成功函数中，$("#myModal").html("")将删除<div class="modal-dialog modal-lg">，然后在.html(response).处附加<div class="modal-content">。

应该是：

父母部门

<div class="modal" id="myModal" data-keyboard="false" data-backdrop="static">
</div>

局部视图

<div class="modal-dialog modal-lg">  
   <div class="modal-content">
     <div class="modal-header">
         <h3 class="modal-title">@Model.FeedbackTypeName</h3> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     </div>
     <div class="modal-body">
        <table class="table">
          <tbody>
            <tr>
                <td><strong>Feedback Type</strong> </td>
                <td>@Model.FeedbackTypeName</td>
                <td><strong>Sent By</strong> </td>
                <td>@Model.FullName</td>
            </tr>
            <tr>
                <td><strong>Email</strong> </td>
                <td>@Model.Email</td>
                <td><strong>Mobile Number</strong> </td>
                <td>@Model.MobileNo</td>
            </tr>
            <tr>
                <td><strong>Sent Date</strong></td>
                <td>@Model.CreatedDate</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td><strong>Message</strong> </td>
                <td colspan="3">@Model.Message</td>
            </tr>
         </tbody>
      </table>
    </div>
    <div class="modal-footer">
         <button type="button" class="btn btn-default " data-dismiss="modal">Close</button>        
    </div>
  </div>
</div>

引导模态的位置及其在单击时被解雇的问题

1 个答案: