I made a simple large modal window in my rails project.
Here is the code:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> title</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The code is copypasted from here: w3cschools
I also tried it to work in jsfiddle it works well.
But on my website this modal doesn't get css
from modal-lg.
I also issued some wired problems with bootstrap responsive grids earlier and decided to use pure.css grid cause I didn't have enough time to dig deeper. So it feels right now like I have some problems with including bootstrap.
This is part of my gem file where I include bootstrap:
gem 'rails', '4.0.2'
gem 'bootstrap-sass'
gem 'sprockets', '2.11.0'
gem 'bcrypt-ruby', '3.1.2'
gem "font-awesome-rails"
So how do I fix this? ( I can make a simple demo page and push it to heroku to show you that modal doesn't work properly, if it will help
Upd: so okay, you can see the example here: link. Check it in web inspector. And check w3c modal window in web inspector to see that on my website it doesn't really get css for modal-lg
Related
I am completely new to Bootstrap and am trying to work it into an existing jQuery project. I can't seem to get modals to work. I have the following markup from the Bootstrap example at the bottom of my page:
<div class="modal" tabindex="-1" id="message_area">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
My Javascript code is:
$("#message_area").modal();
There are no Javascript errors yet no dialog box pops up. I'm sure I'm missing something.
I stripped down my code to just include jQuery and Bootstrap JS and CSS. Using the example from Bootstrap model page, I still can't get it to work. My stripped down code is:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://dev.adex-intl.com/adex/clientsSite/public/js/jquery.js"></script>
<script src="http://dev.adex-intl.com/adex/clientsSite/public/js/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link href="http://dev.adex-intl.com/adex/clientsSite/public/css/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<title>Orders** DEVELOPMENT SITE **</title>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#message_area">
Launch demo modal
</button>
<div class="modal" tabindex="-1" id="message_area" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
Beware of the difference between Bootstrap 4 and bootstrap 5:
You are stating that you use Bootstrap 5, but the toggle and target attributes you use in your button are Bootstrap 4 style.
Replace data-toggle by data-bs-toogle
and data-target by data-bs-target
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#message_area">
Your html page displays the modal correctly once this is fixed, as you can see here (jsfiddle.net). In this example, Bootstrap and JQuery are retrieved via CDN, in order to be sure that the right code is retrieved.
Check the documentations
https://getbootstrap.com/docs/4.6/components/modal/
https://getbootstrap.com/docs/5.0/components/modal/
Also, the placement of your script elements might not be optimal.
See Bootstrap recommendation: https://getbootstrap.com/docs/5.0/getting-started/introduction/#js
(I know there's a bunch of questions like this, but none seem to answer my specific situation.)
I'm trying to get a bootstrap modal to display in a Rails view, but the associated button simply does nothing - clicking it has no effect at all beyond the button interaction effect. As far as I know bootstrap in general is set up to work properly; that doesn't seem to be my issue.
Modal html, most of which is directly copied from the bootstrap documentation:
<div id="new_event">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#new-event-modal">+</button>
<div id="new-event-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">add an event!</h4>
</div>
<div class="modal-body">
Text! <!--form goes here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
</div>
</div>
</div>
</div>
</div>
My custom.scss has #import "bootstrap-sprockets"; #import "bootstrap", and my application.js has //= require bootstrap-sprockets. Other javascript things are working perfectly well, and other bootstrap things are working perfectly well. What am I missing here?
That is not going to work. If you are using Rails 6, there is a very specific way to add Bootstrap to your rails app. I have described it on github:
https://github.com/overdrivemachines/bootstrap-rails
I'm trying add a new personal with Modal. Button and Popup code below. But Modal is not work, it is not opening. Where am I doing wrong? Thanks :)
#model Demo.Models.Personal
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>PERSONAL</h2>
<p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#personalModal">Add Personal</button>
</p>
<div class="modal fade" id="personalModal" tabindex="-1" role="dialog" aria-labelledby="personalModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">New Personal</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Your code is working on my end, I tried it on my plain ASP.NET MVC template. You can see the screenshot here:
I suggest double check and inspect your site, if you have errors in
your javascript. Make sure you are loading jQuery files and Bootstrap
files.
And make sure you have the proper version, in my side, I am using
Bootstrap v3.3.7 and jQuery JavaScript Library v3.3.1. You can check
info here:
https://getbootstrap.com/docs/3.3/getting-started/#download
Lastly, jQuery should be loaded first before Bootstrap to make it
work.
I have used react-native to open a WebView from a ruby on rails app. The page includes an unopened bootstrap modal. How do I open the modal using a react-native call, so the modal can be displayed without reloading the page?
The modal can be activated by javascript that runs in WebView page e.g.
$("#myModal").modal('show');
The modal might look like this
<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">×</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>
I am trying to write Ajax code to render a model form. So, I tried with sample code from web which was written in 'bootstrap-sass 2.3.2.2', where it is working fine.
But, when I tried with latest 'bootstrap-sass 3.3.0.1' (configured as per the bootstrap-sass configuration), it is not working in rails 4. Here is the model how it looks like. Sometimes I see the model is not launching at all.
Here is my configuration settings:
"Gem" file:
gem 'bootstrap-sass', '~> 3.3.0'
gem 'sass-rails', '>= 3.2'
gem 'autoprefixer-rails'
"assets/stylesheets/bootstrap_config.scss":
#import "bootstrap-sprockets";
#import "bootstrap";
Please help me with the correct configuration. Thanks in Advance
Bootstrap v3 is not backward-compatible with Bootstrap v2. You'll need to port your webpages to v3 by following the official migration guide: http://getbootstrap.com/migration/
Among many other changes, the HTML required for Bootstrap modals is different in v3.
Thanks,
After migrating the code to v3, it is working fine..
Old code (bootstrap-sass v2.3.2.2):
<div id="productModal" class="modal fade">
<div class="modal-header">
<!-- Model Title -->
</div>
<div class="modal-body">
<!-- Content -->
</div>
<div class="modal-footer">
<!-- Footer -->
</div>
</div>
New (working) code (bootstrap-sass v3.3.0.1):
<div id="productModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="productModalTitle" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- Model Title -->
<h4 class="modal-title" id="productModalTitle">Title</h4>
</div>
<div class="modal-body">
<!-- Content -->
</div>
<div class="modal-footer">
<!-- Footer -->
</div>
/div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->