asp.net-core - 如何在没有 javascript 的情况下从 .net 核心显示对话框或弹出窗口

如何在没有 javascript 的情况下从 .net 核心显示对话框或弹出窗口

您可以使用 CSS 样式来显示对话框或弹出窗口，代码如下：

CSS 样式：

<style>
    /* popups without javascript */

    /* showing popup background */
    a.popup:target {
        display: block;
    }

        /* showing popup */
        a.popup:target + div.popup {
            display: block;
        }

    /* popup target anchor and background */
    a.popup {
        /* background is initially hidden */
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3; /* anything, really, but bigger than other elements on the page */
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        cursor: default;
    }

    /* popup window */
    div.popup {
        /* popup window is initially hidden */
        display: none;
        background: white; /* choose your color; */
        width: 640px; /* width */
        height: 480px; /* height */
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -320px; /* = -width / 2 */
        margin-top: -240px; /* = -height / 2 */
        z-index: 4; /* z-index of popup backgroung + 1 */
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

        /* links to close popup */
        div.popup > a.close {
            color: white;
            position: absolute;
            font-weight: bold;
            right: 10px;
        }

            div.popup > a.close.word {
                top: 100%;
                margin-top: 5px;
            }

            div.popup > a.close.x {
                bottom: 100%;
                margin-bottom: 5px;
            }
</style>

html内容：

<h1>Popup without javascript demo</h1>
<p><a href="#my_popup">Open popup</a></p>
<p>HTML visible body ends here</p>

<!--
Popup: the key is that id of <a> tag below is the same as href of <a> tag above
- that's what opens popup
<a> below serves several purposes:
    1) popup background covering the whole window,
    2) anchor to show popup when #my_popup is in URL,
    3) link to close popup - if you click the background popup disappears
-->
<a id="my_popup" href="#" class="popup"></a>
<div class="popup">
    <h3>My popup heading</h3>
    <p>Popup content</p>
    <a class="close x" href="#">x</a>
    <a class="close word" href="#">Close</a>
</div>

结果是这样的：

此链接中的代码，您也可以参考此示例。

我正在努力显示对话框以执行各种 crud 操作，我想调用一个控制器操作来填充对话框数据，然后将其显示给用户，而无需使用 ajax 或 jquery

由于您不想使用 JQuery 或 Ajax，因此应在页面加载时填充上述弹出内容，并且在执行 CURD 操作时，您必须刷新整个页面。要实现局部视图刷新弹出内容，您必须使用 JQuery 和 Ajax。

asp.net-core - 如何在没有 javascript 的情况下从 .net 核心显示对话框或弹出窗口

问题描述

解决方案

推荐阅读