在 ASP.NET MVC 4.5 中使用引导程序 4.1 创建模式答案

【问题标题】：Creating modal using bootstrap 4.1 in ASP.NET MVC 4.5在 ASP.NET MVC 4.5 中使用引导程序 4.1 创建模式
【发布时间】：2020-11-16 22:52:31
【问题描述】：

我对 .net 或任何类型的后端开发非常、非常陌生 - 我见过其他问题，但无法将其用于我的项目。

我需要一个打开 Iframe 的简单模式。

1 - 我在 index.cshtml 中创建了模态主容器

2 - 我添加了链接操作。这里我还添加了通常用于激活引导模式的“data-target”和“data-toggle”。

3 - 我创建了一个控制器并返回视图。

然后，当我单击操作链接时，会出现通常的模态层，但没有模态内容。

当我删除“data-target”和“data-toggle”时，它会将我带到实际的模态页面。

所以我认为我在这里遗漏了一些东西，或者我不明白我还需要做什么。

1 - 在主布局中 -> index.cshtml 模态容器

 <div class="fade modal" id=exampleModalLabel aria-hidden=true aria-labelledby=exampleModalLabel role=dialog tabindex=-1>
     <div class=modal-dialog role=document>
         <div class=modal-content></div>
     </div>
 </div>

<script>
    $(function () {
        $("[role=dialog]").on("show.bs.modal", function (a) {
            $(this).find("[role=document]").removeClass().addClass("modal-dialog " + $(a.relatedTarget).data("ui-class"))
        })
    })
</script>

2 - 我的控制器

 public ActionResult Modal()
    {
        return View();
    }

3 - 我的操作链接

<li class="dropdown ">
    @Html.ActionLink("Atendimento", "Modal", "Home", new { }, new
       {
         data_toggle = "modal",
         data_target = "#exampleModalLabel"
       })
</li>

4 - 我的 modal.cshtml

@{
    ViewBag.Title = "";
}


<body>
    <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Atendimento Online</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

<div class="modal-body">

    <style>
        #loading {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 1);
            background-image: url("@Url.Content("~/Content/img/preloader.gif")");
            background-repeat: no-repeat;
            background-position: center;
        }

        .modal-body {
            background: #fff;
        }
    </style>
    <div id="pge">
        <iframe name="iframeaten" src="LOCATION-HERE" height="100vh" width="100%" marginheight="0" style=" margin:0;" frameborder="0" scrolling="no"></iframe>
    </div>
    <div id="loading"></div>
    <script>
        function onReady(callback) {
            var intervalID = window.setInterval(checkReady, 4000);

            function checkReady() {
                if (document.getElementsByTagName('body')[0] !== undefined) {
                    window.clearInterval(intervalID);
                    callback.call(this);
                }
            }
        }

        function show(id, value) {
            document.getElementById(id).style.display = value ? 'block' : 'none';
        }

        onReady(function () {
            show('pge', true);
            show('loading', false);
        });
    </script>
</div>
<div class="modal-footer">
    <button type="button" class="btn standard lightgrey" data-dismiss="modal">Fechar</button>
</div>

【问题讨论】：

标签： javascript jquery asp.net-mvc bootstrap-4 bootstrap-modal

【解决方案1】：

实际上，我是在尝试 Hard 方式，我只需要将 de modal 内容插入到主容器中，因为我不需要做任何局部视图。

<div class="fade modal" id=exampleModalLabel aria-hidden=true aria-labelledby=exampleModalLabel role=dialog tabindex=-1>
    <div class=modal-dialog role=document>
        <div class=modal-content>
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Atendimento Online</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <style>
        #loading {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 1);
            background-image: url("@Url.Content("~/Content/img/preloader.gif")");
            background-repeat: no-repeat;
            background-position: center;
        }

        .modal-body {
            background: #fff;
        }
                </style>
       <div id="pge">
       <iframe name="CONTEN_HERE" height="100vh" width="100%" marginheight="0" style=" margin:0;" frameborder="0" scrolling="no"></iframe>
       </div>
    <div id="loading"></div>
 <script>
    function onReady(callback) { var intervalID = window.setInterval(checkReady, 4000);
    function checkReady() { if (document.getElementsByTagName('body')[0] !== undefined) { 
    window.clearInterval(intervalID);
    callback.call(this);
      }
     }
   }
    function show(id, value) {
      document.getElementById(id).style.display = value ? 'block' : 'none';
                                    }
      onReady(function () {
                                        show('pge', true);
                                        show('loading', false);
                                    });
                                </script>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn standard lightgrey" data-dismiss="modal">Fechar</button>
                            </div>
                        </div>
                    </div>
                </div>

【讨论】：