Modal not displaying on button click

Wappler General How To
#1

Hi,

Can anyone see what I’m doing wrong which is preventing my modal from displaying on button click.

This is my button.

image

<button class="btn btn-primary" data-toggle="modal" data-target="#modal_add_project" type="submit">Add Project<div class="ripple-container"></div></button>

This is my modal.

image

                  <div class="modal" id="modal_add_project" is="dmx-bs4-modal" tabindex="-1" role="dialog">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title">Modal title</h5>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                          </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-dismiss="modal">Close</button>
                          <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                      </div>
                    </div>
                  </div>

When I click the button nothing happens. No errors in the console or network log.

If I enable “Auto Show” on the modal, when the page loads I can verify the modal loads.

image
image.png867×388 20.5 KB

But when I disable “Auto Show” and click the button nothing happens.

Thanks,
Ray.

Setting button action toggle modal doesn't work
#2

In the dynamic mouse click event of the button add modal_add_project.show() action

#3

Hi Brian,

dmx-on:click="modal_add_project.show()"

I can trigger the modal if I preform that action, however, I thought that when using the button properties and setting the action toggle to Modal and specifying the modal to trigger, I would not need to add a dynamic event?

I will use the dynamic event trigger as a work around. Thanks.

@Teodor, could this be a bug??

Thanks,
ray.

#4

@raymantle
Change the button type from submit, to normal type="button" and try again.

EDIT: Actually i just tested with your code and everything works fine. Please provide a link to your page, where we can check the issue.

1 Like
#5