Я работаю над приложением для опросов с использованием datatable, bootstrap, ajax и asp.net mvc. В этом приложении для опроса я открываю всплывающее окно с начальной загрузкой, чтобы добавить опрос, добавить и обновить отсюда. Но у меня проблема с всплывающим окном. И я не могу найти источник проблемы. Всплывающее всплывающее окно не показывает поля так, как я хочу. Например, фон всплывающего окна выглядит прозрачным. В чем может быть проблема. Я использую Bootstrap 4 JavaScript и начальной загрузки 3 CSS. Вы скажете версии, почему, если я использую bootstrap 4 для css, экран полностью сломан. Я добавляю соответствующие блоки кода. Мне любопытны ваши комментарии и оценки.
Изображение созданного всплывающего окна Всплывающее изображение
Всплывающее окно
@model MerinosSurvey.Models.Surveys
@{
Layout = null;
}
@using (Html.BeginForm("AddOrEdit", "Survey", FormMethod.Post, new { onsubmit = "return
SubmitForm(this)" }))
{
@Html.HiddenFor(model => model.SurveyId)
<div class="form-group">
@Html.LabelFor(model => model.SurveyName, new { @class = "control-label" })
@Html.EditorFor(model => model.SurveyName, new { htmlAttributes = new { @class = "form-control"
} })
@Html.ValidationMessageFor(model => model.SurveyName)
</div>
<div class="form-group">
@Html.LabelFor(model => model.SurveyDescription, new { @class = "control-label" })
@Html.EditorFor(model => model.SurveyDescription, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.SurveyDescription)
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary" />
<input type="reset" value="Reset" class="btn" />
</div>
}
Открытое и отправленное всплывающее окно
function PopupForm(url) {
var formDiv = $('<div/>');
$.get(url)
.done(function (response) {
formDiv.html(response);
Popup = formDiv.dialog({
autoOpen: true,
resizable: true,
title: 'Fill Survey Details',
height: 500,
width: 700,
close: function () {
Popup.dialog('destroy').remove();
}
});
});
}
function SubmitForm(form) {
$.validator.unobtrusive.parse(form);
if ($(form).valid()) {
$.ajax({
type: "POST",
url: form.action,
data: $(form).serialize(),
success: function (data) {
if (data.success) {
Popup.dialog('close');
dataTable.ajax.reload();
$.notify(data.message,
{
globalPosition: "top center",
className: "success"
});
}
}
});
}
return false;
}