CODEWITHSUNDEEP
node.jstwitter-bootstrapexpress
diesel
diesel

Reputation: 3386

How to get twitter bootstrap modal working in node js express js?

This is my index.jade file

.navbar.navbar-fixed-top
    .navbar-inner
        .container
            .brand #{title}

    .container
        .row
            .hero-unit
                h1 #{title}
                p Cricket fantasy game where you can be selector.
                a.btn(data-toggle="modal", href="#myModal") Launch


div.modal.hide(id="myModal")
    .modal-header
        button(type="button", class="close", data-dismiss="modal") x
        h3 Modal Header
    .modal-body
        p One fine body...
    .modal-footer

This is my layout.jade file

!!!
html
    head
        title= title
        link(rel='stylesheet', href='/libs/bootstrap/css/bootstrap.css')
        link(rel='stylesheet', href='/libs/bootstrap/css/bootstrap.min.css')
        link(rel='stylesheet', href='/libs/bootstrap/css/bootstrap-responsive.min.css')
        link(rel='stylesheet', href='/stylesheets/style.css')
    body!= body
script(src="/libs/bootstrap/js/bootstrap.js")

I have other bootstrap elements working but cannot follow the following instructions - "You can activate modals on your page easily without having to write a single line of javascript. Just set data-toggle="modal" on a controller element with a data-target="#foo" or href="#foo" which corresponds to a modal element id, and when clicked, it will launch your modal."

How can i do that ?

Upvotes: 4

Views: 6135

Answers (2)

Ibid Athoillah
Ibid Athoillah

Reputation: 95

add jQuery before the bootstrap:

script(src="https://code.jquery.com/jquery-3.2.1.min.js")

Upvotes: 0

diesel
diesel

Reputation: 3386

Include jquery lib in the layout.jade file

Upvotes: 1

Related Questions