Question

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

我想要的只是每次点击模态上的关闭按钮时都点击方法。

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";
                            }


                        }

Answer 1

动态添加HTML时

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

“模态”尚未定义。这就是为什么你不能再次关闭它。

尝试添加：

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

在致电“模态”之前。

使用js方法关闭模态

1 个答案: