how to get source of html, css and javascript and specific portion of webpage

Question

I am trying to use a button and popup from a template I purchased. I have all the source.

The html looks like this:

<div class="panel panel-default">
                    <div class="panel-body">
                          <div class="col-md-6">
                              <p>Have a question about this?  </p>
                          </div>
                          <div class="col-md-6">
                               <button data-toggle="tk-modal-demo" data-modal-options="slide-up" class="btn btn-warning">Ask Question</button>
                          </div>
                   </div>
                  </div>

  <!-- Inline Script for colors and config objects; used by various external scripts; -->
  <script id="tk-modal-demo" type="text/x-handlebars-template">
                            <div class="modal fade{{#if modalOptions}} {{ modalOptions }}{{/if}}" id="{{ id }}">
                            <div class="modal-dialog{{#if dialogOptions}} {{ dialogOptions }}{{/if}}">
                            <div class="v-cell">
                            <div class="modal-content{{#if contentOptions}} {{ contentOptions }}{{/if}}">
                            <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                            </button>
                            <h4 class="modal-title">Equipment Check In</h4>
                            </div>
                            <div class="modal-body">
                            Are you certain that you want to check in this piece of equipment?  Please confirm Yes or No below.
                            </div>
                            <div class="modal-footer">


                            <button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
                            <a class="btn btn-primary" href="az-release-equipment.html">Yes </i></a>
                            </div>
                            </div>
                            </div>
                            </div>
                            </div>
                        </script>

The problem is that there are like 10 css files and even more js files which are huge in size.

I don't want to include all of them in my site just for the popup functionality.

Is there any way to just get the css and javascript for this html snippet as opposed to using over 20 files with a combined size of 10mb?

Answer 1

Thanks to Jack Pattishall in the comments. This chrome plugin does the trick: Find out what CSS styles are being used on a given page