CODEWITHSUNDEEP
twitter-bootstrapexpressmodal-dialogrender
Neurax
Neurax

Reputation: 3757

Modal won't show up express app

I have built a page in html with a modal that comes up on button click using jQuery and Bootstrap. When I have the files on my desktop (css, js, fonts, index.html) everything works as expected.

When I then move into my Express application and create a new view for the same html content and update the links to reflect the links in my app, I get a somewhat broken page.

As far as I can tell the page looks 90% similar. The Bootstrap JS and CSS is definitely loading because I have styling and a collapsing nav bar. jQuery is definitely loading because I have a $ hook in the console (and I see the file getting loaded in resources).

I don't have any console errors (js or css) and I know that if I disable CSS that my content is sitting in the middle of the screen.

I have tried similar code on a different web page that was setup the exact same way and it appeared to work fine. Does anyone know something I don't or might be able to help?

<a href=""><i class="fa fa-envelope fa-2x" data-target="#mymodal" data-toggle="#mymodal"></i><br>SEND TEXT</a>
        <br>

        <!-- insert modal -->
        <div class="modal fade share-modal" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
            <div class="modal-dialog modal">
                <div class="modal-content">
                <br>
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" id="guestphonenumber" placeholder="PLACEHOLDER HERE">  
                        </div><!-- form-group -->

                        <div class="form-group">
                            <select class="form-control">
                                <option>Unlimited</option>
                            </select>
                        </div><!-- form-group -->
                    </form>
                </div>
            </div>
        </div>

I have dug around a bit on SO and some other forums. I have made sure that I'm only including bootstrap resources once. Also I have checked that express is serving files correctly and all the proper files are in place.

Upvotes: 0

Views: 150

Answers (1)

Shehary
Shehary

Reputation: 9992

Couple of fixes

To trigger the modal, you’ll need to include a link or a button. The markup for the trigger element might look like this:

<a href="#"  
data-toggle="modal" 
data-target="#mymodal">open Modal</a>

Notice the link element has two custom data attributes: data-toggle and data-target. The toggle tells Bootstrap what to do and the target tells Bootstrap which element is going to open. So whenever a link like that is clicked, a modal with an id of “mymodal” will appear.

so Change data-toggle="#mymodal" to data-toggle="modal" in your code and move data-target="#mymodal" data-toggle="modal" into <a href="">

and remove modal class from <div class="modal-dialog modal">

Fiddle

Upvotes: 1

Related Questions