使用js方法关闭一个模态

closing a modal using a js method

本文关键字:一个 模态 js 方法 使用      更新时间:2023-09-26

我试图在js方法中调用js方法。方法调用只发生了一次,不知道为什么。
下面是完整的js。对最后的js文件,我试图关闭一个html模态使用btn。onClick,但模态只关闭一次,我的意思是方法只被调用一次。我试着去其他方式,即创建一个新的方法,然后调用,但仍然无法这样做。我不知道我哪里做错了。

我唯一想要的是调用click方法每次我点击关闭按钮的模式。

scDefine(["scbase/loader!dojo/_base/declare", "scbase/loader!extn/order/details/OrderSummaryLinesExtnUI", "scbase/loader!isccs/utils/RelatedTaskUtils",
            "scbase/loader!sc/plat/dojo/utils/EditorUtils", "scbase/loader!sc/plat/dojo/utils/WizardUtils", "scbase/loader!sc/plat/dojo/utils/BaseUtils",
            "scbase/loader!isccs/utils/ContextUtils", "scbase/loader!sc/plat/dojo/utils/ScreenUtils", "scbase/loader!sc/plat/dojo/utils/ModelUtils", "scbase/loader!isccs/utils/UIUtils", "scbase/loader!sc/plat/dojo/utils/EventUtils", "scbase/loader!sc/plat/dojo/utils/WidgetUtils", "scbase/loader!isccs/utils/BaseTemplateUtils", "scbase/loader!extn/utils/SharedComponentUtilsExtn"
        ],
        function(
            _dojodeclare,
            _extnOrderSummaryLinesExtnUI,
            _isccsRelatedTaskUtils,
            _scEditorUtils,
            _scWizardUtils,
            scBaseUtils, _isccsContextUtils, _scScreenUtils, _scModelUtils, _isccsUIUtils, _scEventUtils, _scWidgetUtils, _isccsBaseTemplateUtils, _isccsSharedComponentUtils
        ) {
            return _dojodeclare("extn.order.details.OrderSummaryLinesExtn", [_extnOrderSummaryLinesExtnUI], {
                        // custom code here
                        getHTMLForLinkedStatus: function(gridReference, rowIndex, columnIndex, gridRowJSON, unformattedValue, value, gridRowRecord, colConfig) {
                            //console.log('in function getHTMLForExpectedOn 1' + JSON.stringify(gridRowJSON));
                            console.log('gridRowJSON OLK : ' + gridRowJSON.OrderLineKey);
                            var str = unformattedValue;
                            console.log('in function getHTMLForExpectedOn 2');
                            return str;
                        },

                        showOrderStatusPopup: function(event, bEvent, ctrl, args) {
                            //console.log('open popup : ' + args.to);
                            var cellJson = scBaseUtils.getAttributeValue("cellJson", false, args);
                            var colField = scBaseUtils.getAttributeValue("colField", false, cellJson);
                            console.log('olk: ' + args.item.OrderLineKey);
                            console.log('args.item : ' + JSON.stringify(args.item.OrderStatuses.OrderStatus));
                            //console.log('colField : ' + colField);
                            if (scBaseUtils.equals("extn_LinkedStatus", colField)) {
                                console.log('hello');
                                var orderstatuses = args.item.OrderStatuses.OrderStatus;

                                appendHtml = function(element, html) {
                                        var div = document.createElement('div');
                                        div.innerHTML = html;
                                        while (div.children.length > 0) {
                                            element.appendChild(div.children[0]);
                                        }
                                    }
                                    //appendHtml(document.body,'<script>var modal = document.getElementById("myModal");</script>');


                                var statTable = '<table cellpadding="25" >';
                                statTable += '<tr bgcolor="#f0f2f4"><th>Status</th><th>Quantity</th><th>ShipNode</th><tr>';
                                for (var i in orderstatuses) {
                                    statTable += '<tr>';
                                    statTable += '<td>';
                                    var status = orderstatuses[i].StatusDescription;
                                    statTable += status + '</td>';
                                    statTable += '<td>';
                                    var statusQty = orderstatuses[i].StatusQty;
                                    statTable += statusQty + '</td>';
                                    statTable += '<td> ';
                                    var shipNode = orderstatuses[i].ShipNode;
                                    if (typeof shipNode == 'undefined') {
                                        shipNode = '...';
                                    }
                                    statTable += shipNode + '</td>';
                                    statTable += '</tr>';
                                    console.log(status + ' : ' + statusQty + ' : ' + shipNode + '|');
                                }
                                statTable += '</tr>';
                                statTable += '</table>';
                            }
                            appendHtml(document.body, '<style> .modal {display: block; position: fixed;  z-index: 1; padding-top: 100px;left: 0;top: 0;width: 100%;height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0, 0, 0, 0.3);} </style><style> .modal-content {background-color: #fefefe ;margin: 250px; padding: 26px;border: 1px solid #888; width: 27%;}</style> <style> .close {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold;}.close:hover,.close:focus {    color: #000;    text-decoration: none;    cursor: pointer;}</style>');
                            appendHtml(document.body, "<style>table[Attributes Style] {    width: 100%;    border-spacing: 5px;    -webkit-border-horizontal-spacing: 5px;    -webkit-border-vertical-spacing: 5px;} table[Attributes Style] {    width: 100%;    border-spacing: 5px;    -webkit-border-horizontal-spacing: 5px;    -webkit-border-vertical-spacing: 5px;}table {    white-space: normal;    line-height: normal;    font-weight: normal;    font-size: medium;    font-style: normal;    color: -internal-quirk-inherit;    text-align: start;    font-variant: normal normal;}table {  border-collapse: collapse;    border-spacing: 0;  border: 1px solid #ccc;     margin: 0 1.5em;  display: table;    border-collapse: separate;    border-spacing: 2px;    -webkit-border-horizontal-spacing: 2px;    -webkit-border-vertical-spacing: 2px;    border-color: grey;    border-top-color: grey;    border-right-color: grey;    border-bottom-color: grey;    border-left-color: grey;}th,td {    padding: 0.25em 0.5em;} th {    text-align: center;     font-weight: bold;}table{border-collapse: collapse;border: 1px solid #D1CECE;}</style><div id='myModal' class='modal'><div class='modal-content'><p> <h1 style='font-size: large;'>Order Line Status</h1></p><div class='myTable'>" + statTable + "<div><span class='close'><button id='myBtn'>close</button></span></div></div></div><script>btn.onclick = function() {    modal.style.display = 'none';} </script>");

                            var modal = document.getElementById('myModal');
                            var btn = document.getElementById("myBtn");
                            btn.onclick = function() {
                                modal.style.display = "none";
                            }

                        }

当你动态添加HTML

 <script>btn.onclick = function() { modal.style.display = 'none';} 

"modal"尚未定义。这就是为什么你不能再关闭它。

尝试添加:

  var modal = document.getElementById('myModal');