Angular 5中通过组件函数无法关闭带iframe的iziModal

Let's break down your problem into two key parts: resolving the initialization error and getting the close event to fire properly. Here's what you can try step by step:

1. Fix the "iziModal is not a function" TypeError #

This almost always comes down to load order issues or missing dependencies, since iziModal relies entirely on jQuery.

• Enforce correct script loading order
  Make sure jQuery loads before iziModal in your project's entry file (like index.html or via Angular CLI config). The sequence should be:

  <!-- First load jQuery -->
  <script src="path/to/jquery.min.js"></script>
  <!-- Then iziModal's CSS and JS -->
  <link rel="stylesheet" href="path/to/iziModal.min.css">
  <script src="path/to/iziModal.min.js"></script>
  

  If you're using Angular CLI, add these paths to the scripts and styles arrays in angular.json to ensure global loading in the right order.

• Expose global variables to your Angular component
  Angular's encapsulation might block access to global $ or iziModal in your component. Declare them at the top of your component file to make them available:

  declare var $: any;
  declare var iziModal: any;
  

• Wait for dynamic content to fully render
  ngAfterViewInit is the right hook, but ngView-loaded content might need an extra moment. Wrap your initialization in a short timeout, or use ViewChild to target the modal trigger directly:

  import { AfterViewInit, Component, ViewChild, ElementRef } from '@angular/core';
  
  @Component({
    selector: 'app-your-component',
    template: `<button #modalTrigger>Open IFrame Modal</button>`
  })
  export class YourComponent implements AfterViewInit {
    @ViewChild('modalTrigger') modalTrigger!: ElementRef;
  
    ngAfterViewInit(): void {
      // Give dynamic content time to render
      setTimeout(() => {
        $(this.modalTrigger.nativeElement).iziModal({
          iframe: true,
          iframeURL: 'your-iframe-content-url',
          // We'll add close event logic here next
        });
      }, 100);
    }
  }
  

2. Get the Close Event to Fire #

Once initialization works, ensure you're binding iziModal's official event handlers correctly:

• Bind onClosed/onClosing during initialization
  Add these callbacks directly in your iziModal config to run code when the modal closes:

  $(this.modalTrigger.nativeElement).iziModal({
    iframe: true,
    iframeURL: 'your-iframe-content-url',
    // Triggered when the modal finishes closing
    onClosed: () => {
      console.log('Modal closed successfully!');
      // Add your custom close logic here
    },
    // Optional: Triggered when the close action starts
    onClosing: () => {
      console.log('Modal is closing...');
    }
  });
  

• Use iziModal's official close method for custom buttons
  If you added a custom close button inside the modal/iframe, don't just hide the element—call iziModal's close method:

  // Inside your iframe or modal content
  $('#custom-close-btn').click(() => {
    $('#modal-element').iziModal('close');
  });
  

• Check for event blocking
  Make sure no other JavaScript on the page is stopping event propagation (e.g., event.stopPropagation() in a parent handler) which could prevent iziModal's close event from firing.

Extra Troubleshooting Tips #

• Verify your iziModal version is compatible with your jQuery version (older iziModal builds might not support jQuery 3.x).
• Check for duplicate jQuery/iziModal loads—this can cause variable conflicts and break the function reference.

内容的提问来源于stack exchange，提问作者Revathi P