roblib_alter_solr/js/help_modal.js

(function ($, Drupal) {
  Drupal.behaviors.robib_solr_alterlBehavior = {
    attach: function (context, settings) {
      // Attach event to the modal link without using once()
      $('#open-modal-link', context).click(function (e) {
        e.preventDefault();  
        // Create the modal content
        var modalContent = '<div id="help-modal" class="modal">' +
                            '<div class="modal-content">' +
                              '<span class="close-button">&times;</span>' +
                              '<h2>Roblib Solr Alter</h2>' +
                              '<p>The form allows you two or more existing Solr fields to a new multivalues field.</p>' +
                              '<p>Select existing fields from the dropdowns on the left, and pair them with a new field</ br> '+
                              'in the column on the right. Your new field name comply with your Solr installion\'s schema.</p>' +
                            '</div>' +
                          '</div>';
        
        // Append the modal to the body
        $('body').append(modalContent);
    
        
        // Show the modal
        $('#help-modal').fadeIn();
        
        // Close the modal when clicking the close button
        $('#help-modal .close-button').click(function () {
          $('#help-modal').fadeOut(function () {
            $('#help-modal').remove();  // Remove modal from DOM after closing
          });
        });

        // Close the modal when clicking outside the modal content
        $(window).click(function(event) {
          if ($(event.target).is('#help-modal')) {
            $('#help-modal').fadeOut(function () {
              $('#help-modal').remove();  // Remove modal from DOM
            });
          }
        });
      });
    }
  };
})(jQuery, Drupal);