Opening a Modal from a dropdown link

Wappler General Need Help
1

Hi Wapplers,

I can’t seem to open a modal from a Dropdown menu item. It works in preview mode but the modal does not open in the browser.

Is this a bug?

2

No, There must be something that you are not doing correctly.

If the Modal ID is modalAddImages

image
image357×535 16.8 KB

then the Action Toggle for the button should show Modal while pointing to the Modal ID

image
image350×593 18 KB

3

Perhaps you should show us how you are trying to do it so we can advise.

4

Thanks Ben. When I add a button and toggle the modal then it works fine. But when I add a drop-down nav menu and I click one of the drop-down links to open the modal then it does not work in the browser. It only works in preview mode in Wappler.

5

This is what I would do

image
image1525×879 94.5 KB

6

I did that… and it works great in preview mode. When I try in browser it doesn’t. I’ll restart wappler and try dif browser maybe that will help…

7

If using Node Js with a layout page is the connected layout page saved otherwise the modal script might not be loaded into the browser just something to check might already have the layout saved and this not be the issue.

8

Make sure to change the nav link href from:

href=“#”

to

href=“javascript:void(0)”
9

Which proves that a link should not be used to show a modal.

According to good old best practice, underline links and solid state buttons communicate two different things: a button says that you are going to change the state of the website (either front or back end), whereas a link is going to take you somewhere else (and doesn’t change the state of the website).

In short: A link goes somewhere, a button does something.

Suggested markup for the dropdown (if a dropdown menu must be used):

<div class="dropdown-menu" aria-labelledby="dropdown1">
  <button class="dropdown-item" dmx-on:click="modal1.show()">Show Modal</button>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

or

<div class="dropdown-menu" aria-labelledby="dropdown1">
  <button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modal1">Show Modal</button>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>
1 Like
10

Thank you for everyone’s response! Nothing beats good old best practice, although it does limit you if you want to do dynamic things from a dropdown menu. Thanks Ben, your second markup worked like a charm.

2 Likes