I have a page that simplified, looks like this :
<html>
<form>
//form contents here
//modal 1 here
<div class="modal fade" id="addTime" tabindex="-1" role="dialog" aria-labelledby="addTimeLabel">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<div class="modal-footer">
</div></div></div>
</form>
// insert duplicate modals here (2 of them)
</html>
The modal within the form works perfect, but when I click on buttons to call up modals 2 and 3, they appear within the 1st modals window? How can I fix this?
Edit : If I delete the 1st modal entirely, 2 and 3 work perfect.... but I need the 1st modal too!
$(document).ready(function () {
$('#openBtn').click(function () {
$('#myModal').modal({
show: true
})
});
$(document).on('show.bs.modal', '.modal', function (event) {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
});
/* crazy batman newspaper spinny thing */
.rotate {
transform:rotate(180deg);
transition:all 0.5s;
}
.rotate.in {
transform:rotate(1800deg);
transition:all 1.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<h2>Stacked Bootstrap Modal Example.</h2>
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal fade" id="myModal">
<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">Modal 1</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog / modal goes here.
<br>
<br>
<br>
<p>more content</p>
<br>
<br>
<br> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer"> Close
Save changes
</div>
</div>
</div>
</div>
<div class="modal fade rotate" id="myModal2">
<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">Modal 2</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog / modal goes here.
<br>
<br>
<p>come content</p>
<br>
<br>
<br> <a data-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer"> Close
Save changes
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal3">
<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">Modal 3</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog / modal goes here.
<br>
<br>
<br>
<br>
<br> <a data-toggle="modal" href="#myModal4" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer"> Close
Save changes
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal4">
<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">Modal 4</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog / modal goes here.</div>
<div class="modal-footer"> Close
Save changes
</div>
</div>
</div>
</div>
Check this jsfiddle:http://jsfiddle.net/CxdUQ/
Related
The modals in the project seems to have broke for some reason. It worked a few days ago now it seems it broke. The container div is overflowing.
This is a sample html I've been using after all the modals broke
<!-- Modal -->
<div id="regHomeModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="container" style="border-style: dotted; border-color: black;">
<div class="row" style="border-style: dotted; border-color: red;">
<div class="col-sm-9">
<btn class="test btn btn-info btn-block btn-lg">TEST BUTTON</btn>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
That's happening because bootstrap already has an inbuilt '.container' class which has its width predefined, try changing the class name and check.
I have made a working example on jsfiddle here. I am facing 2 problems.
1: I the example I have made 2 links inside a panel. Can it be true that the modalbox code is gonna fill so much inside the panel box? I need around 20 links in the modalbox, which would result in around 1200 rows. That would be quite a lot?
2: Each link should open a different modalbox, so I can change the text to match the link. How is that possible? I have to set an idea on the modal class, or is that totally wrong?
Best Regards
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">GENERAL</h3>
</div>
<div class="panel-body">
Cookie Policy<br/>
<!-- Cookie Policy 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>This is the text in the Cookie Policy modalbox</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Opening hours<br/>
<!-- Cookie Policy 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>This is the text in the Opening modalbox</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
</script>
I have a created a button when you click it a modal appears.
Here is the code:
<li style="float: right;">
<button id="myBtn" data-target="#myModal" ng-click="printDivModal('rollup-tab')">Modal Test</button>
</li>
In the js, the ng-click should open a model which contains data from stackModal.html
Here is the code in the js file:
$scope.printDivModal = function(divName) {
console.log('opening pop up');
var ModalInstance = $uibModal.open({
//animation: $ctrl.animationsEnabled,
templateUrl: 'app/views/modals/stackedModal.html',
size: 'lg',
/*
controller: function($scope) {
$scope.name = 'top';
}
*/
});
}
Here is the code for the model (stackedModal.html):
<!-- 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">The Modal Header</h4>
</div>
<div class="modal-body">
<p>Text inside the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When I click the Model-Test button, all I see is a small white rectangle show on the screen. Nothing appears from the stackedModal html page. Why is this? Thanks.
Just remove modal wrappers div's, bootstrap-modal does it for you.
You just need to put modal content:
stackedModal.html:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Modal Header</h4>
</div>
<div class="modal-body">
<p>Text inside the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
I have been working on my client's project, in which I have to include a modal window. The Model window should popup when the link is clicked.
But when the modal window gets triggered, the opacity of all elements decrease including the modal window.
But the Modal window's Opacity should not be decreased by default is nt it ?
This is the HTML code of my modal window:
<div id="myModal" class="modal fade" role="dialog" style="background-color: white">
<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>
Here is my triggering html code
<div class="col-md-6 col-sm-12">
<div class="block-image-round margin-top-120">
<a href="#" data-toggle="modal" data-target="#myModal">
<img src="images/banners/1.png" style="width:100%; " alt="">
</a>
</div>
</div>
Modal window part is sibling off the triggering HTML
When The snippet running independently
But when the same snippet mentioned here used in my project code
Click this link for Example
[1]: https://plnkr.co/edit/aEbvvOWGHGQAoLf2ImiF?p=preview
Hope this will be useful to you
Try this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-6 col-sm-6">
<div class="block-image-round margin-top-120">
<img src="http://placehold.it/200/300" style="width:100%; " alt="" data-toggle="modal" data-target="#myModal">
</div>
</div>
<div id="myModal" class="modal fade" role="dialog" style="background-color: white">
<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>
I created a simple HTML with bootstrap 3.2 :
<body>
<div>
<a class="btn" href="#frmLogin" data-toggle="modal">login</a>
</div>
<div class="modal fade" id="frmLogin" role="dialog">
<div class="modal-dialog">
<div class="modal-content>">
<div class="modal-header">
<a class="btn" data-dismiss="modal">×</a>
<h3 id="modalTitle">Login</h3>
</div>
</div>
</div>
</div>
</body>
but the modal does not show correctly.
fiddle link : http://jsfiddle.net/jsmLxhv9/1/
I'm a little late to the party here, but I had the same issue, which lead me to this post. The issue with the posted code is that
<div class="modal-content>">
needs to be
<div class="modal-content">
Other than that, it works fine. Check it out here: http://jsfiddle.net/hjqo17dq/
<body>
<!-- Button trigger modal -->
<button class="btn" data-toggle="modal" data-target="#myModal">
Login
</button>
<!-- Modal -->
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></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>
</div>
</div>
</body>