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
});
});
Related
I open a modal with the normal Boostrap 4 method.
It works and I can open and close the modal.
But in my case I need a second button the close the modal. A simple copy of the first button wouldn't work.
I tried the following code:
$('#sitenav_close').trigger('click.dismiss.bs.modal')
It doesn't work either.
Is there any other method to close a modal with a second button?
In Bootstrap 4.x, you can manually close a modal with the .modal('hide') method.
<!-- my modal -->
<div class="modal" id="myModal">
...
<!-- my alternate close button -->
<button id="altCloseButton">Alternate close</button>
...
</div>
<script>
// close myModal when my alternate close button is clicked
const altBtn = document.getElementById("altCloseButton");
altBtn.onclick = () => $('#myModal').modal('hide');
</script>
However, if all you need is a duplicate close button, this is unnecessary, as shown below:
<!-- required Bootstrap resources -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary m-2" data-toggle="modal" data-target="#exampleModal">
Open demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><small>.modal-title</small></h5>
</div>
<div class="modal-body">
.modal-body
</div>
<div class="modal-footer">
<!-- three identical close buttons -->
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close 1</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close 2</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close 3</button>
</div>
</div>
</div>
</div>
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 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..
I am trying to use Twitter Bootstrap Light-box.
My code :
<html>
<head>
<title>LightBox</title>
<link rel="stylesheet" href="bootstrap-combined.min.css" />
<link rel="stylesheet" href="bootstrap-lightbox.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h2>HELLO</h2>
<div id="lightBoxId" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-content">
<img src="cubsimba141.gif" />
<div class="lightbox-caption">
<p>This is test image</p>
</div>
</div>
</div>
<a data-toggle="lightbox" href="#lightBoxId" class="span2 thumbnail">
<img src="cubsimba141.gif" />
</a>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-lightbox.js"></script>
</body>
</html>
Above code able to show me Light-Box after clicking on thumbnail image. When I click outside that light box it's need to hide that light-box, but it's not working for me.
UPDATE I fixed your code. I had to change the html for the modal. Have a look at this updated link. Also attaching the code below.
Javascript
$(document).ready(function(){
$(".toggle-modal").click(function(){
$("#myModal").modal('toggle');
});
});
HTML
<h1>Modal Simple Demo</h1>
<!-- Button HTML (to Trigger Modal) -->
Launch Demo Modal
<!-- Modal HTML -->
<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>
It seems that you forgot to make it functional with javascript. I created this demo. Have a look... Demo Link.