I've been trying to build a customize bootstrap theme without success. I want just the Modal component. For that, I'm using Bootstrap 4 and I did the following:
I installed bootstrap library through NPM within my project
(simple web page)
Created 2 css files: mine.css and mine.scss.
Imported the necessary (I think) modules for just Modal component.
I run the code "sass mine.scsss mine.css" into the shell
Then it works, but not the transition effect. It seems like something is missing. Here is my code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal</title>
<link rel="stylesheet" href="mine.css">
</head>
<body>
MORE INFORMATION
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">More information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Coming soon!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</body>
</html>
mine.scss
// Required
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
// Modal
#import "node_modules/bootstrap/scss/modal";
#import "node_modules/bootstrap/scss/buttons";
Here is an example.
You need to add https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/scss/_transitions.scss because it hosts the fade class modals are using
The classes used are .fade .fade.in and .show
Related
On mobile devices, Bootstrap modal is not centered correctly when body min-width is wider than 980px.
I tried bootstrap 4, bootstrap 5 and bootstrap 3 modals.
You can see in the screenshot that the modal div is positioned out of the screen and the backdrop doesnt cover the full width, leaving white space on the right.
<!DOCTYPE html>
<html dir="rtl">
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</head>
<body>
<style>
body {
min-width: 1035px;
}
</style>
<button class="btn btn-lg btn-primary center-block text-" data-remote="false" data-toggle="modal"
data-target="#myModal">show modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
some content
</div>
</div>
</div>
</div>
</body>
</html>
Add mx-auto class to parent div like that class="modal fade mx-auto"
I am new to Joomla, I need to build a simple page that contains logos, when clicking any of the logos I need to see pop up message with description of the logo I clicked, close button should also be included.
You can use Bootstrap for this.
In your template you should include jQuery and Bootstrap 4. You can do it by adding in your /templates/your_theme/index.php the following:
<?php
$doc->addScript('https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js', 'text/javascript');
$doc->addScript('https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js', 'text/javascript');
$doc->addStyleSheet('https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css');
$doc->addScript('https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js', 'text/javascript');
?>
Then you can use simple Boorstrap 4 modal, like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<div class="your-any-logo-class" role="button" data-toggle="modal" data-target="#exampleModal">
Put your logo here
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal description
</div>
</div>
</div>
</div>
More about Bootstrap 4 modal here https://getbootstrap.com/docs/4.0/components/modal/#live-demo
I created an html page with bootstrap's modal code (copied from Bootstrap's website. I notice that the modal doesn't show unless I call modal('show'). Why? Shouldn't the browser interpret the html and display the modal box? The following code doesn't show the modal but if you comment the script at the end, it will show the modal
<!DOCTYPE html>
<html lang="en">
<head>
<base href="">
<title>Example</title>
<!--meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"-->
<link rel="stylesheet" media="screen" href="fiddle.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="fiddle.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</head>
<body>
Did you see the dialog box?
<div class="modal" tabindex="-1" role="dialog" id="mydialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<¬- UNCOMMENT THIS AND THE MODAL WILL SHOW-->
<!--script>
$('#mydialog').modal('show');
</script-->
</body>
Bootstrap modal is designed for trigger the modal window when you click on the element(i.e. a button or a link) with following attributes:
data-toggle="modal" opens the modal window
data-target="#myModal" points to the id of the modal
In your code, no click event occurs and thus modal was not open bydefault
It looks like you want to open modal when page load as the modal is not designed to open on page load you have to manually trigger modal's show Method
since modal works if you clicked on a button to toggle display
this example works fine
see this link https://getbootstrap.com/docs/4.0/components/modal/#live-demo
You can Use this bootstrap modal code this is working fine.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
That is because modaldiv with the class of modal has a display property set to none by default.
Comment the script and inspect the modal in your browser you will notice that it has a display of none.
When you call .modal() and pass in the parameter show on your modal id, then it's display property gets set to block, which is when you are able to see it.
This is because modals are not supposed to be shown by default but instead on a user event so you can call .modal('show)` on the event.
$('#mydialog').modal('show');
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<body>
Did you see the dialog box?
<div class="modal" tabindex="-1" role="dialog" id="mydialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
i think it was happen because in head tag you join jquery and bootstrap librrary so your don’t need you code anymore because bootstrap do this for you..
When I click link,
<a href="#" data-toggle="modal" data-target="#report">
It shows modal well in 1-2 seconds but after that, the modal load page again. So, the content of modal is replaced by the page it loaded. Why?
<div id="report" 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">Modal Header</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>
This is probably because you are using the a tag with a href attribute to open the modal. It will then replace the modal with the content of your href, which is the current page. Try to use a button or something to open your modal:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#report">Launch modal</button>
EDIT: for the ones that don't believe this is possible and are downvoting me, here is jsfiddle with shows exactly the same behavior that #thai6070 is describing in his question.. This option is deprecated in newer versions of bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Paste this code into your head tag.
I am trying to create a simple interface with Bootstrap. I have a small page with a few things. It works just fine, but then I wanted to add a modal element to it. I took the example directly from the second bootstrap example. But when I try to use it only the shadow appears, which because the buttons don't appear I can't exit out of it.
Why can't I get the modal to work?
Initial code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row border-top-bottom">
<div class="col-sm-1">
<h5>WEEK 1</h5>
</div>
<div class="col-sm-2 border-right">
Launch demo modal
<img src="http://placehold.it/50x50">
<p><img src="http://placehold.it/50x50"></p>
</div>
<div class="col-sm-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">This weeks project tittle</h3>
</div>
<div class="panel-body">
<p>Project description: ba nananananana nananananana nananananana nananana nana batman!</p>
</div>
</div>
</div>
</div>
</div>
<script>
$('.btn').popover();
</script>
</body>
</html>
Added modal code:
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
In your modal code, yyou have class="modal hide fade" I am not sure what the hide portion is for. I think it's from a older version and your using the newer version ?
That prevented the actual modal window from showing. However, here is the proper modal window code, that should work fine.
Replace:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
You need to load Bootstrap's javascript file to launch the modal. Try adding the bootstrap.min.js file into your head tag like this:
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
You are mixing bootstrap 2.3 and 3.0. They are not compatible.
The html for the modal dialog is from bootstrap 2.3.2
Try changing to this and it should work:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>