How can I use Bootstrap modals without loading the entire library?
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 CSSClose icon
under ComponentsComponent animations (for JS)
under JavaScript componentsModals
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 componentsTransitions
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">×</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>
Hope this helps! Good luck.
how to use bootstrap's modal dialog only, instead of the whole bootstrap.css to aviod conflicting with my own css
Just include your CSS after the bootstrap.css file. Whichever is last is what is used in CSS.
If you're worried about element specific css rules like input
or div
etc, then just reset everything at the beginning of your css file.
Google CSS reset and found this:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
From that you can simply customize a couple things like text/link colors and hovers, etc, but most of the css in bootstrap is used with classes so people can have custom css with it.
Bootstrap style modal without using bootstrap
I think you can customize your css for bootstrap.
Use this link for doing that: https://getbootstrap.com/docs/3.3/customize/
Hope this helps!
Can I make a Modal without Bootstrap?
Is it possible to build a modal without Bootstrap classes?
A modal is an overlay that prevents the user to interact with some parent content. It is not proprietary of Boostrap, although Bootstrap makes it very easy to implement one by adding css classes. Underneath, Bootstrap uses JQuery to implement most of its functionality, including the modals.
You can implement it by using any other library for example Bulma , by using another framework that uses jquery, for example jqueryui, by using any other javascript library that could implement a modal, or by implementing it using javascript, or even with only css and html.
This is a simple tutorial on how to create a modal using javascript and css.
This is a tutorial on how to create a modal without javascript, only html5 and css.
These tutorials are very useful if you don't want your code to be dependant of any third-party library, like jquery.
If you don't want to (or can't) use bootstrap, but you can use jquery, you can follow this tutorial.
What bootstrap library need to use modal-body?
Only CSS files won't work properly. You have to add Javascript files as well to perform all the functionalities.
How to open a Bootstrap modal window using jQuery?
Bootstrap has a few functions that can be called manually on modals:
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
You can see more here: Bootstrap modal component
Specifically the methods section.
So you would need to change:
$('#my-modal').modal({
show: 'false'
});
to:
$('#myModal').modal('show');
If you're looking to make a custom popup of your own, here's a suggested video from another community member:
https://www.youtube.com/watch?v=zK4nXa84Km4
Related Topics
Hover and Click on CSS Triangle
Text with Image Background in Svg or CSS
Align Material Icon with Text on Materialize
Absolute Position Affects Width
Vertically Center in Viewport Using CSS
Differencebetween P:Nth-Child(2) and P:Nth-Of-Type(2)
How to Unskew Background Image in Skewed Layer (Css)
Adding a Small Picture on the Right Side of Textfield with CSS
Font Sizes: Ems VS Pixels... in 2011, Which One Should Be Used
Attribute Selector Where Value Equals Either a or B
Is There a CSS "Haschildren" Selector
@Import Styles Not Working in a Media Query
How to Detect the User's Browser and Apply a Specific CSS File
Create Horizontally Scrolling List Item View Using Bootstrap Columns
Ampersand (Parent Selector) Inside Nested Selectors
How to Position Background Image in Bottom Right Corner? (Css)