Не могу манипулировать модом Bootstrap 3 - PullRequest
Новая
       1

Не могу манипулировать модом Bootstrap 3

0 голосов
/ 08 октября 2018

Я использую MVC, у меня есть стандартная страница scaffolded 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 - Создал частичный просмотр 

  <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 :'( ");
    });

}

мысли?

enter image description here

У меня здесь странная проблема!хотя я включил 

<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 не зеленый, что я долженделать?

1 Ответ

0 голосов
/ 08 октября 2018

Я нашел это на здесь .Но не знаю, работает ли это для вас или нет.Можете ли вы просто попробовать ниже?В любом случае, по умолчанию он должен быть выровнен по центру. 

#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;
}
...