css - Bootstrap 3弹出透明和样式问题？

问题描述

我正在开发一个带有数据表、引导程序、ajax 和 asp.net mvc 的调查应用程序。在这个投票应用程序中，我使用引导程序打开一个弹出窗口以添加投票并从此处添加和更新。但是我在弹出窗口时遇到了问题。而且我找不到问题的根源。弹出的弹出窗口没有以我想要的方式显示字段。例如，弹出窗口的背景看起来是透明的。可能是什么问题。我正在使用 Bootstrap 4 javascript 和 bootstrap 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;
    }

标签： cssasp.netasp.net-mvctwitter-bootstrap-3bootstrap-modal

css - Bootstrap 3弹出透明和样式问题？

问题描述

解决方案

推荐阅读