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

Posted 2023-03-06

【中文标题】Bootstrap 3弹出透明和样式问题？

【英文标题】：Bootstrap 3 popup transparent and style problem?

【发布时间】：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。但是我有一个小问题。弹出的关闭按钮有图标问题。我会解决这个问题的。

【参考方案1】：

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