Schließen eines Modales mit einer js-Methode

Question

Ich habe versucht, eine js-Methode innerhalb einer js-Methode aufzurufen. Der Methodenaufruf geschieht nur einmal nicht wissen, warum.
Unten ist die komplette js. In Richtung der letzten JS-Datei versuche ich, ein HTML-Modal mit btn.onClick zu schließen, aber das Modal schließt erst, wenn ich meine, dass die Methode nur einmal aufgerufen wird. Ich habe versucht, einen anderen Weg zu gehen, d. H. Eine neue Methode zu erstellen und dann anzurufen, war aber immer noch nicht dazu in der Lage. Ich weiß nicht, wo ich falsch liege.

Einzige Sache, die ich möchte, ist die Methode auf klicken jedes Mal, wenn ich auf Schließen Schaltfläche auf Modal klicken. noch

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

Wenn Sie HTML dynamisch hinzufügen

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

"modal" ist nicht definiert. Deshalb können Sie es nicht wieder schließen.

Versuche Zugabe:

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

vor dem Aufruf von "modal".