Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Marcelo Retana
Marcelo Retana
2,534 Points

How can I call a modal from a external html file? (Bootstrap)

I'm building a website using bootstrap. But i'm come to somewhat of an dead-end. I've created a modal from an given example (see below). As you might see, this is a modal taken straight from their website.

<!--modal-->
        <div id="myModal" class="modal fade didi-modal add-event-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="add-event-content">
                    <div class="didi-modal-header">
                        <h2 class="event-modal-header">Agregar Evento</h2>
                        <a class="didi-modal-close"><span><i class="glyphicon glyphicon-remove"></i></span></a>
                    </div>
                    <form role="form" method="POST" action="/events">
                        <div class="form-group">
                            <label for="inputNombreEvento">Nombre del Evento</label>
                            <input type="text" class="form-control" id="inputNombreEvento" placeholder="" name="events[eventName]" required>
                        </div>
                        <div class="form-group">
                            <label for="inputInformacion">Información</label>
                            <textarea class="form-control" rows="3" name="events[information]" required></textarea>
                        </div>
                        <div class="form-group no-margin">
                            <label for="inputLocacion">Dónde?</label>
                            <input type="text" class="form-control" id="inputLocacion" placeholder="" name="events[where]" required>
                        </div>
                        <div class="map-container-modal">
                            <div id="map-canvas"></div>
                        </div>                 
                        <div class="date-time-container">
                            <div class="container datetimer-label-container">
                                <div class="row">
                                    <div class="col-md-3"><label>De:</label></div>
                                    <div class="col-md-3"><label>A las:</label></div>
                                    <div class="col-md-3"><label>Hasta la(s):</label></div>
                                    <div class="col-md-3"><label>Del:</label></div>
                                </div>
                            </div>
                            <div class="container datetimer-input-container-group">
                                <div class="row ">
                                    <div class="col-md-3 datetimer-input-container-col">
                                        <input type="text" class="date start" required/>
                                        <span class="didi-calendar-ico start"></span>
                                    </div>
                                    <div class="col-md-3 datetimer-input-container-col">
                                        <input type="text" class="time start" required/>
                                        <span class="didi-chevron"></span>
                                    </div>
                                    <div class="col-md-3 datetimer-input-container-col">
                                        <input type="text" class="time end" required/>
                                    </div>
                                    <div class="col-md-3 datetimer-input-container-col">
                                        <input type="text" class="date end" required/>
                                        <span class="didi-calendar-ico end"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="button-container">
                            <button type="submit" class="btn btn-primary cancel-btn pull-left">Cancelar</button>
                            <button type="submit" class="btn btn-primary accept-btn pull-right">Aceptar</button>
                            <% if (typeof success === true) { %>
                                <p class='error'>Evento creado correctamente</p>
                            <% } %>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--modal end-->

But I want to keep my modals in separate html files. How can I open these modals when they are kept inside different html files ?

example: if the button is inside eventos.html but the modal is inside modaleventos.html, how would I open the modal?

1 Answer

Chris Malcolm
Chris Malcolm
2,909 Points
Chris Malcolm
Chris Malcolm
2,909 Points

A good thing to think about is using at templating system like handlebars.js that can take of this synchronously or async loading of templates.

you can do it yourself with an Ajax call as well, bringing it in on dom load into a hidden div.

3rd option is to load it in as a server side include (php or ruby or so something). Te benefit of this is you don't have to do multiple to requests from client side, but this only applies if your using server side stuff