bug: the modal is not work.

[ichenhua]

What version of FlyonUI are you using?

v1.2.0

Which browsers are you seeing the problem on?

No response

Reproduction URL

https://flyonui.com/docs/overlays/modal/#basic-examples

Describe your issue

I tried to launch model-target with openbtn, but it didn't work.

<div id="modal-target" class="overlay modal overlay-open:opacity-100 modal-middle hidden">
    <div class="modal-dialog overlay-open:opacity-100">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Dialog Title</h3>
                <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#middle-center-modal">
                    <span class="icon-[tabler--x] size-4"></span>
                </button>
            </div>
            <div class="modal-body">
                This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the
                modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and
                demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling
                will move the modal as needed.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-soft btn-secondary" data-overlay="#middle-center-modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<button id="open-btn" type="button" data-overlay="#modal-target" class="btn btn-primary --prevent-on-load-init">Open modal using methods</button>

<script src="path/to/overlay.js"></script>
<script>
    window.addEventListener('load', function () {
        const openBtn = document.querySelector('#open-btn');
        openBtn.addEventListener('click', () => {
            alert(111111)
            HSOverlay.open('#modal-target');
        });
    })
</script>

[github-actions]

Hi @ichenhua

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

[ichenhua]

<script>
    document.addEventListener('DOMContentLoaded', function () {
        HSOverlay.open('#modal-target');
    })
</script>

Error:

overlay.js:17  Uncaught TypeError: Cannot read properties of undefined (reading 'find')
    at t.open (overlay.js:17:8117)
    at HTMLDocument.<anonymous> (lhb/:3251:19)

[yagnikvamja]

Hello @ichenhua ,

The issue you are encountering is due to using the --prevent-on-load-init class in the <button> tag. This class is specifically intended to prevent the initialization of the modal when using public methods.

Note (for public methods only): To prevent initialization, you can add the --prevent-on-load-init class to the modal element before initializing it with new. To resolve the issue, you can remove this class as demonstrated in the example below:

<div id="modal-target" class="overlay modal overlay-open:opacity-100 modal-middle hidden" >
  <div class="modal-dialog overlay-open:opacity-100">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Dialog Title</h3>
        <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#middle-center-modal" >
          <span class="icon-[tabler--x] size-4"></span>
        </button>
      </div>
      <div class="modal-body"> This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed. </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-soft btn-secondary" data-overlay="#a" > Close </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<button id="open-btn" type="button" data-overlay="#modal-target" class="btn btn-primary" > Open modal using methods </button>

window.addEventListener("load", function () {
  const openBtn = document.querySelector("#open-btn");
  openBtn.addEventListener("click", () => {
    alert(111111);
    HSOverlay.open("#modal-target");
  });
});

By removing the --prevent-on-load-init class, the modal functionality should work as expected. If you have any further questions or concerns, please don’t hesitate to reach out!

[ichenhua]

@yagnikvamja Thank you for patiently answering my questions. I have more three questions to ask.

1、I want to call a function that I have wrapped myself. How can I achieve this? The following methods are not effective.

<button id="open-btn" type="button" onclick="show()" class="btn btn-primary" > Open modal using methods </button>

function show(){
    HSOverlay.open("#modal-target");
}

2、Regarding the documentation, could you please provide some appropriate supplements?

For example, I want to call the modal component separately, but for beginners, with only the following explanation, they have no idea which JS file they should load.

overlays

Tailwind CSS Modal
A modal serves the purpose of presenting a dialog or box upon clicking a button.

[Require FlyonUI JS](https://flyonui.com/docs/getting-started/quick-start/)

3、Is there a suitable method to bundle the JS files loaded by the project into a single file?

For example, writing it like this makes the code look so ugly.

<script src="{{url_for('static', filename='plugins/tooltip.js')}}"></script>
<script src="{{url_for('static', filename='plugins/dropdown.js')}}"></script>
<script src="{{url_for('static', filename='plugins/overlay.js')}}"></script>

[ichenhua]

@yagnikvamja Here's an additional question.

4、The jQuery core package referenced in the project is outdated, and the console shows warnings like this, which is very unhelpful.

JQMIGRATE: jQuery.trim is deprecated; use String.prototype.trim
overrideMethod @ hook.js:608
migrateWarn @ jquery-migrate.js:136
obj.<computed> @ jquery-migrate.js:170
$.cookie @ toolbar.js:2
init @ toolbar.js:104
(匿名) @ toolbar.js:188
mightThrow @ jquery.js:3489
process @ jquery.js:3557
setTimeout
(匿名) @ jquery.js:3602
fire @ jquery.js:3223
fireWith @ jquery.js:3353
fire @ jquery.js:3361
fire @ jquery.js:3223
fireWith @ jquery.js:3353
ready @ jquery.js:3844
completed @ jquery.js:3854
jquery-migrate.js:138 console.trace

[PruthviPraj00]

Hello @ichenhua,

I want to call a function that I have wrapped myself. How can I achieve this? The following methods are not effective.

1. We have provided detailed documentation on how to use the modal's methods. Could you please clarify the specific functionality you're trying to achieve? We'd be happy to assist you further.

Regarding the documentation, could you please provide some appropriate supplements?

2. Thank you for your valuable feedback. We will certainly address this issue and provide clearer guidance in a future release to help beginners better understand which JavaScript files need to be loaded.

Is there a suitable method to bundle the JS files loaded by the project into a single file?

3. If you wish to include all FlyonUI components in your project, you can use the following script:
   <script src="../node_modules/flyonui/flyonui.js"></script>

The jQuery core package referenced in the project is outdated, and the console shows warnings like this, which is very unhelpful.

4. Are you encountering the jQuery warnings when using the DataTables component?We have not faced this issue on our end, but please let us know if you would like assistance in resolving it.

[ichenhua]

The first question is the most urgent, so let's focus on that first.
I saw the content of the document you mentioned, but I have a question.

<button id="modal-trigger" type="button" class="btn btn-primary --prevent-on-load-init" aria-haspopup="dialog" aria-expanded="false" aria-controls="modal-target" data-overlay="#modal-target" > Open modal </button>
<button id="open-btn" type="button" class="btn btn-primary">Open modal using methods</button>

const modal = new HSOverlay(document.querySelector('#modal-trigger'))
const openBtn = document.querySelector('#open-btn')

I hope that the second button, open-btn, triggers the modal. Why do we still need to use the first button querySelector('#modal-trigger')? Is the first button unnecessary?

How can I use just one button to trigger a modal window through a custom function?

[PruthviPraj00]

Hello @ichenhua,

Why do we still need to use the first button with querySelector('#modal-trigger')? Is the first button unnecessary?

The reason we need both buttons is as follows:

<button id="modal-trigger" type="button" class="btn btn-primary --prevent-on-load-init" aria-haspopup="dialog" aria-expanded="false" aria-controls="modal-target" data-overlay="#modal-target" > Open modal </button>
<button id="open-btn" type="button" class="btn btn-primary">Open modal using methods</button>

The first button is required because of the data-overlay attribute, which is used to create the modal instance. This is the relevant code:

document.querySelectorAll('[data-overlay]:not(.--prevent-on-load-init)').forEach((el: HTMLElement) => {
      if (!window.$hsOverlayCollection.find(elC => (elC?.element?.el as HTMLElement) === el)) new HSOverlay(el)
}) 

How can I use just one button to trigger the modal window through a custom function?

You can use the basic modal button without needing to call any methods.

Can you please describe the scenario you are facing so we can help you.

[ichenhua]

Do you mean that two buttons are required to trigger the modal function? It clearly only requires one button, yet it insists on adding an extra button as a placeholder?

If that's the case, isn't this design a bit foolish?

My requirement is very simple: I need a single modal to be shared among multiple sets of data on a list page, and I need to load data before showing the modal, so I need to customize a method.

Examle:

<ul>
    <li><span>001</span><a onclick="showModal(1)" href="">btn1</a></li>
    <li><span>002</span><a onclick="showModal(2)" href="">btn2</a></li>
    <li><span>003</span><a onclick="showModal(3)" href="">btn3</a></li>
</ul>

<div id="modal">
    <span>this is node {data.id} modal content.</span>
</div>

<script>
    function showModal(id){
        let data = {id: id}
        modal.show('#modal')
    }
</script>

[yagnikvamja]

Hello @ichenhua,

I hope this message finds you well.

To clarify, single button is required to open the modal, but the button must include the data-overlay attribute containing the id that references the modal div which helps to create a proper initialization.

The example provided in the Flyon UI - Modal Usage documentation demonstrates the use of the modal.show() method, which is triggered when the JS method button is clicked.

As per your approch, the button needs the data-overlay="modal" attribute, where the value points to the modal's id. This setup ensures the modal is triggered correctly, refer the below example:

Currently, your code does not include the data-overlay attribute, which is why the modal is unable to find its reference.

For such personalized customizations, please make use of the Discord community and discussion section.

~Best regards,

[ichenhua]

Unfortunately, it seems that you have not been paying attention to my key issue.

I cannot directly bind data-overlay to the button because I need to load some data before the popup appears.

So I need to create a custom function to load the data first and then show the popup. Is it really that difficult to implement such a simple requirement?