Setting button action toggle modal doesn't work

Wappler General
#1

I’ve noticed this several times in my project. setting the action toggle of a button to modal and selecting the modal, nothing happens until i edit the code directly and change dmx-on:click="" to dmx-on:click=“modal.show()”.

Appears to be a bug of some sort. I can’t create a button that the modal toggle will work, until i add the code directly.

Using bootstrap 4. I’ve also tried with bootstrap 5, same result and seems related to this:

#2

I believe you need to be using an anchor button, not just a regular button. An anchor button will give you a setting in the properties panel to add a modal.

Screen Shot 2022-11-22 at 3.46.28 PM
Screen Shot 2022-11-22 at 3.46.28 PM834×534 32.9 KB

#3

The option is there on a regular button.
image

#4

It would be good if you could share the code for your button when you use the modal setting in the UI to set it.

#5

I just tested this and it works fine with the action toggle used for the button.
A really simple example:

    <div class="container">
        <div class="row">
            <div class="col">
                <button id="btn1" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal1">Button</button>
            </div>
        </div>
    </div>
    <div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

Maybe something is not right with your page, so please either share a link to it or paste your page code here.

#6

it’s local to my machine, I’ll test on a new page and see if it works.

All i did was create a button. Change the text of the button to what i wanted it to say by double clicking and typing. Then, under button properties changed action toggle to modal and modal set to the modal i wanted to open.

#7

So does my code work for you?
How is my code different than yours? Please provide it here.

#8

Recreated the button and now it works. No clue why it wasn’t before. I didn’t do anything different.

#9