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>
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
});
});
How can I solve this issue?
<div class="modal fade" id="onload-modal">
<!-- data-backdrop="static" data-keyboard="false" -->
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p><img src="#" id="modal-banner" alt="Image"></p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal">Skip</button>
<button class="btn btn-danger" onclick="#">Register Now</button>
</div>
</div>
</div>
</div>
It seems like some other code is clashing with this code. Can you please help?
<script>
$(document).ready(function() {
$("#onload-modal").modal('show');
});
</script>
Instead of showing the modal when the document is ready, try to show the modal when the window is loaded, as below:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="modal fade" id="onload-modal">
<!-- data-backdrop="static" data-keyboard="false" -->
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p><img src="#" id="modal-banner" alt="Image"></p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal">Skip</button>
<button class="btn btn-danger" onclick="#">Register Now</button>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script>
$(window).on('load', function()
{
$("#onload-modal").modal('show');
});
</script>
</body>
</html>
<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 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.
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.