如何在js中创建一个弹出窗口答案

【问题标题】：How to create a popup in js如何在js中创建一个弹出窗口
【发布时间】：2021-10-22 04:23:21
【问题描述】：

我需要帮助，我是 jQuery 和 java 脚本的新手。

我的 TG.js 喜欢

var initializeTemplateGrid = function () {
var templateGrid = $("#templateGrid");
templateGrid.kendoGrid({
    dataSource: {
        transport: {
            read: {
                url: "",
                dataType: "json",
                type: "GET"
            },
            parameterMap: function (data, type) {
                if (type == "read") {
                    return {
                        limit: data.pageSize,
                        offset: data.page-1,
                        sort: data.sort[0].field + ":" + data.sort[0].dir
                    }
                }
            }
        },
        schema: {
            data: "Records",
            total: "TotalRecordCount" 
        },
        serverPaging: true,
        pageSize: 25,
        serverSorting: true,
        sort: { field: "TemplateName", dir: "asc" }
    },

    
    sortable: {
        allowUnsort: false
    },
    pageable: true,
    pageable: {
        pageSizes: [10, 25, 50]
    },
    noRecords: {
        template: "No Templates Available"
    },
    columns: [
        {
            field: "TemplateName",
            title: "Template Name"
        },
        {
            template: "<div >#if(data.SiteCount > 0){#<a Id='tt' href=''>#:SiteCount# Sites</a>#} else{#N/A#}#</div>",
            field: "SiteCount",
            title: "Name TEMP"
        }
    ]
});

};

当前为 TemplateName，如果 sitecount >0 然后通过 href ='' 我将转到主页。现在我想在单击带有 data.SiteCount 值的链接时创建一个弹出窗口。

我该怎么做？？

我在下面尝试过

    $(function () {
    $("#dialog1").dialog({
        autoOpen: false
    });

    $("#opener").click(function () {
        $("#dialog1").dialog('open');
    });
});

但我的项目不支持错误对话框关键字。

【问题讨论】：

标签： javascript jquery asp.net-mvc

【解决方案1】：

您没有提及您在项目中引用的其他库。在布局页面中添加以下内容：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

然后在布局或你的js文件中白一个这样的可重用函数：

function showDialogUI(msg, closedTrigger) {
    $('#dialogModal span#dialogModalMessage').text(msg);
    $("#dialogModal").dialog({
        modal: true,
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            if ((closedTrigger === null) || (closedTrigger === undefined)) {                
            }
            else {
                closedTrigger();
            }
        }
    });
}

然后从任何页面调用这样的函数：

showDialogUI('There is a test message.', null);

您可以在null 的位置传递一个函数引用，该函数引用将在对话框关闭时调用。

【讨论】：