Bootstrap v3.3 Modal

Question

I'm struggling with how will I show the modal content from the separate HTML file.

here is the button in my index.html file

<button type="button" class="btn btn-RAQ" data-toggle="modal" data-target="#RQF">
    <span><strong>REQUEST A QUOTE</strong></span> <i class="glyphicon glyphicon-check"></i>
</button>

and i want to load this modal content

request-a-quote.html

<!-- Modal -->
    <div class="modal fade" id="RQF" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h1 class="modal-title" id="myModalLabel">Request a Quote:</h1>
          </div>
          <div class="modal-body">

            <!-- RQF MAIN CONTENT -->
            <form id="contact-form" method="post" action="contact.php" role="form">

                    <div class="messages"></div>

                    <div class="controls contact-form">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Full Name *</label>
                                    <input type="text" name="name" id="name" placeholder="" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Company Name *</label>
                                    <input type="text" name="name" id="name" placeholder="" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Email *</label>
                                    <input type="email" name="email" id="email" placeholder="" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Phone *</label>
                                    <input type="phone" name="phone" id="phone" placeholder="" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Interested In *</label>
                                    <select required>
                                          <option disabled selected value="">Please Select *</option>
                                          <option value="Digital Signage Solutions">Digital Signage Solutions</option>
                                          <option value="Interior Fit Out Works">Interior Fit Out Works</option>
                                          <option value="Custom Exhibition Stands">Custom Exhibition Stands</option>
                                          <option value="Civil Engineering & Contracting">Civil Engineering & Contracting</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Attache File</label>
                                    <input type="file" id="Afile" accept=".jpg, .jpeg, .png, .pdf" max="1">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Message *</label>
                                    <textarea name="message" id="message" placeholder="" required></textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                 <input type="submit" name="submit" value="SEND" onClick="">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <p class="text-muted"><strong>*</strong> These fields are required.</p>
                            </div>
                        </div>
                    </div>
                </form>
                <!-- END RQF MAIN CONTENT -->
            </div>
          </div>
        </div>
    </div><!-- ENBD Modal -->

is it possible to do this? because this would be easy if i will make changes to my request a quote form.

i tried to search and cannot find any answer so i posted it here. any help would be appreciated.