La finestra di dialogo modale Bootstrap nel Pannello di aggiornamento ASP impedisce il focus di input in piccoli plugin MCE

Question

Ho lo stesso problema di questo question sebbene le mie circostanze siano leggermente diverse, nessuna delle soluzioni fornite funziona per me.

Ho una finestra di dialogo modale bootstrap all'interno di un pannello di aggiornamento ASP con un controllo tinyMCE che funziona bene a prescindere da qualsiasi popup modale da tinyMCE - tutti i controlli di input non sono attivabili, i clic e il tabbing non hanno alcun effetto.

Il consenso generale è quello di utilizzare e.stopImmediatePropagation() anche se questo non fa nulla nella mia configurazione.

<asp:Panel ID="EditShowDetailsPanel" runat="server" CssClass="modal fade" TabIndex="-1" role="dialog" aria-labelledby="EditShowDetailsPanel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <asp:UpdatePanel ID="EditShowDetailsUpdatePanel" runat="server" UpdateMode="Conditional"> 
       <ContentTemplate> 
        <div class="modal-header"> 
         <h4 class="modal-title">Edit Show Details</h4> 
        </div> 
        <div class="modal-body"> 
         <div class="row"> 
          <div class="col-xs-12"> 
           <asp:TextBox ID="ShowInfoTextBox" TextMode="MultiLine" runat="server" ClientIDMode="Static" /> 
           .... 
          </div> 
         </div> 
        </div> 
        <div class="modal-footer"> 
         <asp:LinkButton ID="SaveEditShowDetailsLinkButton" runat="server" OnClientClick="mceSave();" OnClick="SaveEditShowDetailsLinkButton_Click" CssClass="btn btn-success">Save Changes</asp:LinkButton> 
         <button type="button" class="btn btn-danger waves-effect" data-dismiss="modal">Cancel</button> 
        </div> 
       </ContentTemplate> 
      </asp:UpdatePanel> 
     </div> 
    </div> 
</asp:Panel> 


<script type="text/javascript"> 

     function mceSave() { 
      //save contents to textbox 
      tinyMCE.triggerSave(); 
     } 

     function pageLoad() { 

      var prm = Sys.WebForms.PageRequestManager.getInstance(); 
      prm.add_beginRequest(BeginRequestHandler); 

      function BeginRequestHandler(sender, args) { 
       //remove mce editor 
       tinymce.execCommand('mceRemoveEditor', true, 'ShowInfoTextBox'); 
      } 

      //TinyMCE init 
      $(document).ready(function() { 
       tinymce.init({ 
        selector: "textarea#ShowInfoTextBox", 
        menubar: false, 
        theme: "modern", 
        height: 300, 
        plugins: [ 
         "link lists hr anchor media code" 
        ], 
        toolbar: "undo redo | bold italic underline | bullist numlist | link | media | code" 

       }); 
      }); 
} 
</script> 

Answer 1

Il Bootstrap modale ha una funzione che impedisce focalizzazione di elementi estranei al modale stessa. Questo può essere visto nel codice modale Bootstrap (the enforceFocus function). Dal momento che le finestre di dialogo di TinyMCE sono rese all'esterno del modal bootstrap, la modale non consente di focalizzarle.

In Bootstrap 4, questa funzionalità può essere disabilitata impostando focus: false nella configurazione modale.

In Bootstrap 3, questa funzionalità non può essere soppressa. Qui ci sono due possibili soluzioni:

• Override viene inizializzato la funzione enforceFocus prima del Bootstrap modale, tramite

  $.fn.modal.Constructor.prototype.enforceFocus = $.noop; 
  

  Questo disabiliterà la funzione per tutti modali da allora in poi.

• Rimuovere il gestore eventi di messa a fuoco dopo l'inizializzazione della finestra di dialogo.

  $(document).off('focusin.bs.modal'); 
  

  Questo disabiliterà le funzionalità presenti nei modali attualmente aperte, ma quelli di nuova apertura sarà ancora averlo.