Bootstrap 3弹出透明和样式问题？答案

【问题标题】：Bootstrap 3 popup transparent and style problem?Bootstrap 3弹出透明和样式问题？
【发布时间】：2020-04-13 20:25:40
【问题描述】：

我正在开发一个带有数据表、引导程序、ajax 和 asp.net mvc 的调查应用程序。在这个投票应用程序中，我使用引导程序打开一个弹出窗口以添加投票并从此处添加和更新。但是我在弹出窗口时遇到了问题。而且我找不到问题的根源。弹出的弹出窗口没有以我想要的方式显示字段。例如，弹出窗口的背景看起来是透明的。可能是什么问题。我正在使用 Bootstrap 4 javascript 和 bootstrap 3 css。你会说为什么如果我将 bootstrap 4 用于 css 屏幕会完全损坏的版本。我正在添加相关的代码块。我很好奇你的cmets和评价。

创建的弹出窗口图片Popup image

弹出视图

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

【问题讨论】：

您不能将 bootstrap 4 javascript 与 bootstrap 3 css 一起使用...
@HoomanBahreini 谢谢老兄谢谢我将 Bootstrap css 和 javascript 版本更改为 4 并对 layout.cshtml 进行了更改。问题解决了。这是我参考的来源。 sensibledev.com/mvc-bootstrap-form-example。但是我有一个小问题。弹出的关闭按钮有图标问题。我会解决这个问题的。

标签： css asp.net asp.net-mvc twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

我将 Bootstrap css 和 javascript 版本更改为 4，并对 layout.cshtml 进行了更改。问题解决了。这是我参考的来源。 reference link。但我有一个小问题。弹出的关闭按钮有一个图标问题。我来解决这个问题。

【讨论】：