-1

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?

Atma
  • 29,141
  • 56
  • 198
  • 299
  • 1
    Read the code, figure out what parts you want, then use those parts. – SLaks Sep 02 '15 at 00:47
  • As far as I know, there's no easy way of doing this short of reading through the CSS and JS by hand (with perhaps some ctrl-f). – Maximillian Laumeister Sep 02 '15 at 00:49
  • @SLaks can I use chrome or any other tool to just grab what I need? It is all over the place with so many entries in the css and javascript file. – Atma Sep 02 '15 at 00:49
  • This might help: http://stackoverflow.com/questions/15770138/find-out-what-css-styles-are-being-used-on-a-given-page – Jack Sep 02 '15 at 01:20

1 Answers1

0

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

Community
  • 1
  • 1
Atma
  • 29,141
  • 56
  • 198
  • 299