Question

我正在使用MVC，具有标准的脚手架index.cshtml页面。我的目标是在模式框中显示详细信息。我能够显示模式框，但是无论做什么，模态总是显示在屏幕的左上方。我正在尝试使用css对其进行操作，但是无论我做什么它都无法正常工作

所以我要做的是：

Index.cshtml

 <div id="myModal" class="modal TestModal">
    <div class="modal-dialog TestModal">
        <div class="modal-content TestModal">
            <div id="myModalContent" class="TestModal"></div>
        </div>
    </div>
</div>

1-创建了partialView

  <div class="modal-header">
    <h4 class="modal-title">Validation Error</h4>
</div>
<div class="modal-body">
    <p class="text-warning">
        <small>Please make an entry before save</small>
    </p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>

2-在我的控制器中创建了以下方法

public PartialViewResult DisplayModalFor(int id)
    {
        //var parent = _context.TOURNAMENTS_M.Include(x => x.TOURNAMENTS_D).First(x => x.TM_ROWID.Equals(Id));
        return PartialView("_DetailsModal");
    }

最后，我的javascript文件中具有以下功能：

function PopUpModalFor(tmRowid) {

const id = tmRowid;
$.ajax({
    url: "/TOURNAMENTS_M/DisplayModalFor",
        type: "GET",
        data: {
            id: id
        }
    })
    .done(function (result) {

        $("#myModalContent").html(result);
        $("#myModal").modal("show");

    })
    .fail(function () {
        alert("I failed :'( ");
    });

}

有想法吗？

我在这里有一个奇怪的问题！尽管我已经包括了

<link rel="stylesheet" href="~/css/MyStyle.css" />

进入我的_Layout.cshtml，我的CSS无法完全正常工作。

例如我有

.YOLO {
background-color: green;
}

.Padded {

    margin: 50px 100px 0 100px !important;
}

然后我将index.cshtml修改为如下形式

<div class="Padded">
   <p class="YOLO">THIS SHOULD BE GREEN</p>
   <h2>Index</h2>
//More code..

但是p标签不是绿色我应该怎么办？

Answer 1

我在here上找到了它。但是不知道它是否对您有用。您可以尝试以下吗？无论如何，默认情况下，它应该与中间对齐。

#myModal{
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

无法操纵Bootstrap 3模式

1 个答案: