How can I use Bootstrap modals without loading the entire library?

Question

I'm integrating my Modal from Bootstrap with another site that doesn't use it.

I see that bootstrap lets you separate the Javascript for each component. But what about the CSS? If I link to bootstrap.css the whole site will change. I just want enough CSS for the Modal to work. (I tried going thru the CSS file and just guessing what I needed, but it didn't work).

If i remember right bootstrap uses `less` for the stylesheet to creation. So i should be easy to prefix all rules with an e.g. `.my-project` class that you add to your surrounding container. Or you use `iframe` sandboxing if this is an option, with the limitation that the area where your elements are visible is limited to the dimension of the `iframe` — t.niese, Jun 13 '13 at 13:28
I was able to get it to work from here. You have to select the Modal JS Component AND the Modal JQuery Plugin. http://twitter.github.io/bootstrap/customize.html — mdundas, Jun 13 '13 at 14:53
thx T. i like you're idea about iFrame sandboxing... will do this if i run into other issues... — mdundas, Jun 13 '13 at 14:54

score 117 · Accepted Answer · edited Dec 24 '22 at 02:22

Update as of Bootstrap v3.2.5

Thanks to @Gruber for confirmation as of v3.2.5.

The link is still here, to customize the setup as mentioned by @Fisu.

You need to select 4 options though, not just modal as stated. Start by clicking Toggle All to turn everything off, then select these 4 options;

Buttons under Common CSS
Close icon under Components
Component animations (for JS) under JavaScript components
Modals under JavaScript components

This should bring all of the CSS over that you'll need. Next is the jQuery plugins section, again start by selecting Toggle All to turn everything off and then just select two plugins:

Modals under Linked to components
Transitions under Magic (required for any kind of animations)

That's all you'll need, js (bootstrap.min.js) and css (only bootstrap.css which you'll need to modify a bit, explained below). Go to the bottom of that page and select compile and download to grab your package.

One final thing to note. As @Rrrrrrrrrk mentioned, "I found it still added a lot of normalization to the start of the css, but could safely delete it (from html to img, keeping the css from .img-responsive onwards)." This is still valid. I also added the following css to force a few styles into the Modals:

.modal { font-family:Arial,Helvetica,sans-serif!important}
.modal p {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important; color:#000 !important; font-size:14px;}

This just ensures fonts are similar to the original modal styling and don't take on your pages styles (could probably be tweaked a bit more). One final item to note, you could minify the css at this point by running it through http://cssminifier.com/. Saves a few KB.

Implementing the Modal:

I might as well just finish this off. I'm using a cookie plugin because I want to give my users an option to hide the message for 14 days, which is set in the code. Here are the code blocks you'll need:

This should go in the <head> of you document, probably after any of your css, so even just before the ending </head> tag will work.

<!-- CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="modalsonly/css/bootstrap-3.2.0.min.css">

<!-- END CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

This should go within your <body>. This will create the modal and the css you've included will hide it.

<!-- HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    <div class="modal fade " id="important-msg" tabindex="-1" role="dialog" aria-labelledby="important-msg-label" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <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" id="important-msg-label">Message Title!</h4>
          </div>
          <div class="modal-body">
            <p>Message text</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="dont-show-again">Don't Show Again</button>
          </div>
        </div>
      </div>
    </div>

<!-- END HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

This code should go just before the ending </body> tag. It loads jQuery, bootstrap, and the cookie plugin I need.

<!-- PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    <!-- Latest jQuery (1.11.1) -->
    <script src="modalsonly/js/jquery-1.11.1.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="modalsonly/js/bootstrap-3.2.0.min.js"></script>    
    
    <!-- jQuery Cookie -->
    <script src="modalsonly/js/jquery.cookie-1.4.1.min.js"></script>

<!-- END PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

Finally, you'll want to add this script after the plugins above. This is a bit customized to my situation, I'm only launching the modal if there is no cookie set, and if the modal launches created a function to click Don't Show Again which creates the cookie to disable the launch of the modal.

<script>
    //Start the DOM ready
    $( document ).ready(function() {


        //CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP

            //Check to see if the cookie exists for the Don't show again option
            if (!$.cookie('focusmsg')) {
                //Launch the modal when you first visit the site            
                $('#important-msg').modal('show');
            }

            //Don't show again mouse click
            $("#dont-show-again").click( function() {

                //Create a cookie that lasts 14 days
                $.cookie('focusmsg', '1', { expires: 14 });     
                $('#important-msg').modal('hide');      

            }); //end the click function for don't show again

        //END CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP

        
    }); //End the DOM ready
</script>

Thanks man, glad it helped! If anyone reading this sees that the answer has become outdated, please let me know and I'll update it. — Tony M, Jun 09 '15 at 14:02
Can tell that as of Bootstrap 3.3.5 version this is still valid and perfectly working. Also remember to add the [transitions.js](http://getbootstrap.com/javascript/#transitions) in the jQuery plugin composition (under **Magic**) for the animation effects to be effective. — Gruber, Oct 25 '15 at 22:51
"You need to select 4 options" => you don't. In my case Modals only require `Less files > JavaScript components > Modal, Component animations (for JS)` and `jQuery plugins > Modals` — TCB13, Sep 07 '16 at 22:50
I tried using this and it works well except that I'm gettin an error in the console `Uncaught TypeError: Cannot convert undefined or null to object` `...` `at s (bootstrap.min.js:11)` The line being referenced is this: `i || t(o).trigger(t.support.transition.end)` — Lhen, Jun 09 '18 at 10:29

score 15 · Answer 2 · edited Jun 07 '14 at 12:41

15

Go to the Bootstrap customize section and select just the modal option in the components section. Download the file, open the bootstrap.css file and copy the entire contents into your own CSS file.

If you try to work out which specific parts you need you'll likely miss something important, and besides, the modal css on its own is not too big.

Update: The link is now here. I found it still added a lot of normalization to the start of the css, but could safely delete it (from html to img, keeping the css from .img-responsive onwards).

edited Jun 07 '14 at 12:41

Nagama Inamdar

2,851
22
39
48

answered Jun 13 '13 at 13:37

Fisu

3,294
9
39
61

This almost worked for me. Except I have set a custom width for the .modal-dialog class. When using full bootstrap it worked correctly, but using the modal-customized files, half of the dialog is still the default size. – xr280xr Apr 02 '14 at 22:58
I tried again and it worked. I don't know what changed. – xr280xr Apr 03 '14 at 15:49
1

The link is now [here](http://getbootstrap.com/customize/). I found it still added a lot of normalization to the start of the css, but could safely delete it (from html to img, keeping the css from .img-responsive onwards). – Rick Westera May 19 '14 at 06:28

Shlomi Hassid · Answer 3 · 2015-08-22T00:09:49.700

Here you go using bootstrap 3:

JSnippet DEMO and Source code

Source code in a github gist

After including the CSS, JS the usage is exactly the same:

<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>

<!-- Modal HTML -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes you made to document before closing?</p>
                <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

exactly what I was looking for! – Dinesh Oct 16 '17 at 04:02 — Dinesh, Oct 16 '17 at 04:02

score 3 · Answer 4 · answered Jun 28 '20 at 09:10

My CSS+js Bootstrap modal only:

  document.querySelector('.mymodalonline').onclick = function() {  document.querySelector('.modal').classList.toggle('open');}

  document.getElementById('closf').onclick = function() {  document.querySelector('.modal').classList.toggle('open');}

 .hidden {
    display: none;
}
  .open {
    display: block!important;
}
.modal-open {
  overflow: hidden;
}
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  background-color: #00000063;
  padding-top: 100px;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
.modal-content {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: 0;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000000;
}
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  min-height: 16.42857143px;
}
.modal-header .close {
  margin-top: -2px;
}
.modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.modal-body {
  position: relative;
  padding: 15px;
}
.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .2;
}
button.close {
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.close:hover, .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: .5;
}
@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }
  .modal-sm {
    width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}
[role="button"] {
  cursor: pointer;
}
.hide {
  display: none !important;
}
.show {
  display: block !important;
}
.invisible {
  visibility: hidden;
}
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.hidden {
  display: none !important;
}
.affix {
  position: fixed;
}

<a href="#myModal" data-toggle="modal" class="mymodalonline" onclick="return false;"><span>Обратный<br>звонок</span></a>

<!-- HTML-код модального окна -->
<div id="myModal" class="modal fade text-center">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Заголовок модального окна -->
      <div class="modal-header">
        <button type="button" id="closf" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h4 class="modal-title">Заказать звонок</h4>
      </div>
      <!-- Основное содержимое модального окна -->
      <div class="modal-body">
      <div class="row">
     <div class="col-xs-2"></div>
      <div class="col-xs-8">
        111
      </div>
    <div class="col-xs-2"></div>
        </div></div>
    </div>
  </div>
</div>

How can I use Bootstrap modals without loading the entire library?

4 Answers4

Linked