Tried to make a modal window using class = "model" via bootstrap tutorial. I did everything exactly like in the tutorial, installed bootstrap but my code doesn't work. Any ideas what's wrong with it? I didn't used any js or other plugins and I believe that I shouldn't.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="modal-1">
Open modal window
</button>
<div class="modal" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Registration</h4>
<button class="close" type="button" data-dismiss="modal">
<i class="fa fa-close"></i>
</button>
</div>
<div class="modal-body">
<p>Something</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Закрыть окно</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Try this code you have just missed # symbol for data-target
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal-1">
Open modal window
</button>
<div class="modal" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Registration</h4>
<button class="close" type="button" data-dismiss="modal">
<i class="fa fa-close"></i>
</button>
</div>
<div class="modal-body">
<p>Something</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Закрыть окно</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Add # before the id of the modal in data-target
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal-1">
Open modal window
</button>
<div class="modal" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Registration</h4>
<button class="close" type="button" data-dismiss="modal">
<i class="fa fa-close"></i>
</button>
</div>
<div class="modal-body">
<p>Something</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Закрыть окно</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
In button add data-target="#modal-1". it will work
Open modal window
Related
I want to have the cancel button to the left of the footer and stay the close and save button always on right.
I have tried adding float:left property to cancel button but that didnt help. Any solution thats based on bootstrap classes are highly appreciated.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
All you need to do is to add me-auto class to your cancel button.
me-auto means margin end auto and this has the same effect than adding margin-right: auto; to your cancel button.
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
You can just wrap the Close and Save buttons in a div, and set a justify-content: space-between in your modal-footer class like this:
HTML File:
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<div>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
CSS File:
.modal-footer {
justify-content: space-between;
}
I have this code to call my modal and data is being called using Jquery. But I can't update the font size inside. I tried this CSS but it only change the color, it doesnt change the size.
CSS
.modal-body{
font-family: Arial, Helvetica, sans-serif;
color: red;
font-size: 26px;
}
Modal
<div class="modal" tabindex="-1" id="modal_feedback">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">IM Enhancement Request Form</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<?!= include('Index_Feedback') ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<input type="button" class="btn btn-success btn-send pt-2 btn-block" value="Submit Request" onclick="triggerSubmit()">
</div>
</div>
</div>
</div>
instead of overwriting the css you can add style in modal-body div
style={{fontSize="26px"}}
$('#ModalBtn').on('click',function(){
$('.modal-body').addClass('fontsize');
});
.fontsize{
font-size:30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="ModalBtn">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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>
</div>
</body>
</html>
Can somebody help me with Bootstrap 5 modal footer?
I want to make a modal footer have a text (span or label) in the left and button in the right
I've found this solution and try it (changed everyting from "left" to "start") but not working.
I tried using d-flex justify-content-start and also tried using float-start but still not working.
Simply use the justify-content-between class on the modal-footer...
<!-- Modal -->
<div class="modal fade" id="inputInv" tabindex="-1" aria-labelledby="InputInventory" aria-hidden="true" data-bs-backdrop="static">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="InputInventory">INPUT DATA</h5>
</div>
<div class="modal-body">
<!-- CONTENT HERE -->
</div>
<div class="modal-footer justify-content-between">
<div>
<span>Example vertically aligned text</span>
</div>
<div class="actions">
<button id="btnInClose" type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
<button id="btnInSave" type="button" class="btn btn-sm btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
Updated Codeply
You need to modify some structure to achieve it.
CSS:
.modal-footer {
justify-content: space-between;
}
HTML:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#inputInv">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="inputInv" tabindex="-1" aria-labelledby="InputInventory" aria-hidden="true" data-bs-backdrop="static">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="InputInventory">INPUT DATA</h5>
</div>
<div class="modal-body">
<!-- CONTENT HERE -->
</div>
<div class="modal-footer">
<div>
<span>Example vertically aligned text</span>
</div>
<div class="actions">
<button id="btnInClose" type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
<button id="btnInSave" type="button" class="btn btn-sm btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
Check this for the example.
If you are using Bootstrap-5 then don't need to write CSS for text or element alignment so you need to use pre-defined classes from BS-5.
You just need to add me-auto class in <span> or <label> then text will render from left side.
Helpful like:
https://getbootstrap.com/docs/5.1/utilities/flex/
https://css-tricks.com/how-auto-margins-work-in-flexbox/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary m-5" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<span class="me-auto">Example vertically aligned text</span>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#inputInv">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="inputInv" tabindex="-1" aria-labelledby="InputInventory" aria-hidden="true" data-bs-backdrop="static">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="InputInventory">INPUT DATA</h5>
</div>
<div class="modal-body">
<!-- CONTENT HERE -->
</div>
<div class="modal-footer">
<div class="flex-grow-1 bd-highlight">Example vertically aligned text</div>
<div class="bd-highlight"><button id="btnInClose" type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button></div>
<div class="bd-highlight"><button id="btnInSave" type="button" class="btn btn-sm btn-primary">Save</button></div>
</div>
</div>
</div>
</div>
I think This would fix your problem
Just added the buttons and the text into the div elements and added class bd-highlight to the three div elements
Also added class flex-grow-1 to the text div element
I'm trying to have a modal pop up, but when I press the button nothing happens.
Here's the HTMl code so far-
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">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>
Well, hello there!
</p>
</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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
When I open the page, a button appears on the top-left corner. Upon pressing it, it dies get highlighted, but nothing happens at all.
Do you have any idea why this is happening, and how to solve it?
here is the problem with your html classes.
look for Bootstrap 5 model
change your html with this or grab from above link
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</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>
You have used bootstrap 4 code instead of bootstrap 5 code, either make all your modals the way bootstrap 5 does it, and you can read it here: https://getbootstrap.com/docs/5.0/components/modal/
or just change bootstrap versions to bootstrap 4
The difference is mostly that in bootstrap 5 you use "data-bs" + something in your attributes instead of just "data-"
Add the following script in the head of your html code.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
I past into a new page the live demo:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
but it doen't work. Why?
In head section there are Bootstrap CSS and Javascript:
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/bootstrap.js"></script>
You sure you've included jquery as well?
It needs to come before bootstrap.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Notice data-target="#myModal". Notice also that your modal is <div class="modal fade"> (without an id).
Change <div class="modal fade"> to <div class="modal fade" id="myModal"> and you should now see it pop up when you click the button.