I had some problems with the modal. It wont appear on the screen. The scripts are working and jquery.js is added before bootstrap.js.
<!--LINK IN THE NAVBAR-->
<li>Login</li>
<!-- START OF MODAL -->
<div class="modal-open modal" id="Login" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<p>Login here!</p>
<p>Don't have a account? Sign Up!
</div>
</div>
</div>
</div>
<!--SCRIPT-->
<script src="script/jquery.min.js"></script>
<script src="script/bootstrap.js"></script>
<script src="script/bootstrap.min.js"></script>
<script src="script/bootstrap.js"></script>
<script src="script/bootstrap.min.js"></script>
Loading the bootstrap script twice will break the modal functionality. Load it only once.
Related
How can we minimize a modal window created using materializecss.
Here is a working fiddle.
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Close !!
</div>
</div>
Jquery
$(document).ready(function(){
$('.modal-trigger').leanModal({
dismissible: false
});
});
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 trying to implement a modal which contains an input type text from a first modal, but the problem that the input field is deactivated once the second modal is triggered.
Anyone know how could i solve this?
please find below Jsfiddle link for an example :
Modals
<div id="modal2" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
<input type=text/>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
<a class="waves-effect waves-light btn modal-trigger" href="#modal2">Modal</a>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<script>
$(document).ready(function () {
$('.modal').modal();
});
</script>
I think the problem is the version you're using, the fastest solution was to change the version
From
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
To
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="col-md-3">
<div class="card card-profile">
<div class="card-avatar">
<a href="#pablo">
<img class="img" src="{% static 'img/faces/marc.jpg' %}">
</a>
</div>
<div class="card-body">
<h5 class="card-category text-gray">CEO / Co-Founder</h5>
<h4 class="card-title">{{user.first_name}} {{user.last_name}}</h4>
<h6 class="card-category text-gray">ILO - 001</h6>
<h6 class="card-category text-gray">HOME HEALTH</h6>
<p class="card-description">
Monday to Friday (9AM to 6PM)
</p>
View
</div>
</div>
</div>
The code for an Profile Pic on my main page, and I was trying to add a modal pop to wherein when I click the View button it will show the whole profile of the employee. And i don't have an idea how to do this. Thanks for any help.
Add this bootstrap 4 CDN (Content Delivery Network) into your HTML page inside head tag
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
The Modal component is a dialog box/popup window that is displayed on top of the current page
The following example shows how to create a basic modal
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
InSide modal-body you can put your code whatever either you put employee profile whatever you want
<!-- 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>
if you want some animation Use the .fade class to add a fading effect when opening and closing the modal
Change the size of the modal by adding the .modal-sm class for small modals, .modal-lg class for large modals, or .modal-xl for extra large modals.
Center the modal vertically and horizontally within the page, with the .modal-dialog-centered class
Read More about modal documentation Click Here
You can edit or preview code Here
I have a button on my page and I want it to display a pop up box when its clicked however I have tried few things and it doesnt work
I want to make that button to display message when its clicked.
<button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom" data-toggle="modal" data-target="#moreinfo"><i class="fa fa-thumbs-up"></i> Find out more</button>
<div id="moreinfo" class="modal fade" role="dialog">
<div class="modal dialog">
<div class="modal-content">
<div class="modal-header">
fds
</div><!--end of modal header-->
<div class="modal-content">
fds
</div><!--end of modal content-->
<div class="modal-footer">
fds
</div><!--end of modal footer-->
</div><!--end of modal content-->
</div><!--end of modal dialog-->
</div><!--en dof more info div-->
With this code all I get is the screen fades out when the button is clicked but it doesnt display anything.
I have got the following too
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
You have 2 typos in your code:
<div class="modal dialog">
There should not be any space between modal dialog. Its one class modal-dialog.
You are missing modal-body inside modal. Instead you have used modal-content twice. It should have the structure as per Bootstrap's Documentation.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom" data-toggle="modal" data-target="#moreinfo"><i class="fa fa-thumbs-up"></i> Find out more</button>
<div id="moreinfo" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
fds
</div><!--end of modal header-->
<div class="modal-body">
fds
</div><!--end of modal body-->
<div class="modal-footer">
fds
</div><!--end of modal footer-->
</div><!--end of modal content-->
</div><!--end of modal dialog-->
</div><!--en dof more info div-->
You didnt put hyphen in modal and dilaog , you wrote
<div class="modal dialog">
but You have to write like this
<div class="modal-dialog">
just because of hyphen(-) all problem occured
Do you need the Bootstrap popover?
If yes - here are good and simple example and documentation that exactly represents your needle.
Or you need the button that will call your modal window? If yes - here are good example and documentation that also exactly represents your needle.
Your Code is correct the only problem was in this line .
You have to write like that
All modal code is here of your now just copy paste it and save your time :) cheers
<div id="moreinfo" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
</div><!--end of modal header-->
<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><!--end of modal footer-->
</div><!--end of modal content-->
</div><!--end of modal dialog-->
</div><!--en dof more info div-->