Search code examples
htmlnode.jspug

Modal Dialog not showing - PUG


I am currently working on a simple Modal dialog, that should open on a button press; Figuring I´d use the bootstrap example (https://getbootstrap.com/docs/5.0/components/modal/) as a starter would be the best quick win.

As I am using pug as a view engine, I`ve quickly converted the HTML into Pug and tested it without success.

The Modal Container is not showing / popping up. I don`t get any errors within my console. Bootstrap is functioning perfectly.

The pug code:

include modules/head
// Button trigger modal
button.btn.btn-primary(type='button' data-bs-toggle='modal' data-bs-target='#exampleModal')
    | Launch demo modal
// Modal
#exampleModal.modal.fade(tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true')
    .modal-dialog
        .modal-content
            .modal-header
                h5#exampleModalLabel.modal-title Modal title
                button.btn-close(type='button' data-bs-dismiss='modal' aria-label='Close')
            .modal-body
                | This is a test.
            .modal-footer
                button.btn.btn-secondary(type='button' data-bs-dismiss='modal') Close
                button.btn.btn-primary(type='button') Save changes

sdsadHead includes both jquery and bootstrap (v4.4).

Does anyone have any ideas why it wouldn`t work? Suggestions about fade css settings couldnt help.

Thanks in advance.


Solution

  • As proposed by Sean above the issue was an incorrect load of the Bootstrap.js file.

    Fail by developer.