Jquery 引导模式问题'；s的位置及其关闭时的解雇

我使用的是

bootstrapv4.0.0

和

jqueryjavascript库v3.3.1

。我对bootstrap modal的位置和它在close click上的解雇有一些意见。 它呈现得非常完美（位置不正确），数据也加载正确。现在有两个问题：

模态将定位到左上角，与模态大小无关

当我单击Modal的关闭按钮或X按钮（右上角）时，它不会被解除。然而，若我从模式中删除了淡入淡出类，那个么关闭按钮就可以工作了

我希望模态定位在中心位置，其次关闭模态按钮也应该与淡入类一起工作

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

我尝试了以下代码：

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

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

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

$(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);
    }

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

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

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

$(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);
    }

---

在jquery ajax成功函数中，

$（“#myModal”）.html（“”

将删除

，然后添加

.html（响应）。

从

绑定到哪里

因此，它应该是：

上级部门

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

@Model.FeedbackTypeName×
反馈类型
@Model.FeedbackTypeName
发送人
@Model.FullName
电子邮件
@模型。电子邮件
手机号码
@美孚利诺模型
发送日期
@Model.CreatedDate
消息
@模型消息
接近