Menu
I need to open a modal from another modal, my problem is that when the modals have a big height. When I close the second modal, I loose the scroll on my page and the page is freezed. Here is a plunker to illustrate my problem: plunkr
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#firstsModal">
<span class="glyphicon glyphicon-flash"></span> 1st modal
</button>
<div class="modal fade" id="firstsModal" tabindex="-1" role="dialog"
aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" style="width:60%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
>×</button>
</div>
<div class="modal-body row" style =" margin-left: -0px; margin-right: 0px;">
<div class=" col-sm-12">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th style="text-align:center">Catégorie</th>
</tr>
</thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>1</td></tr>
...
<tr><td>1</td></tr>
<tr><td>1</td></tr>
<tr><td>1</td></tr>
</tbody>
</table>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#secondmodal">
2nd modal
</button>
</div>
</div>
<div class="modal-footer" style="text-align:center">
<button type="button" class="btn btn-success" data-dismiss="modal" >
<span class="glyphicon glyphicon-ok-circle"></span> Ok
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="secondmodal" tabindex="-1" role="dialog"
aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" style="width:60%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
>×</button>
</div>
<div class="modal-body row" style =" margin-left: -0px; margin-right: 0px;">
<div class=" col-sm-12">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th style="text-align:center">Catégorie</th>
</tr>
</thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>1</td></tr>
....
<tr><td>1</td></tr>
<tr><td>1</td></tr>
<tr><td>1</td></tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer" style="text-align:center">
<button type="button" class="btn btn-success" data-dismiss="modal" >
<span class="glyphicon glyphicon-ok-circle"></span> Ok
</button>
</div>
</div>
</div>
</div>
</body>
</html>
767
There was a same kind of question was asked and provided a fix for that:
Bootstrap Modal Issue - Scrolling Gets Disabled
As per the answers of the above question, the below CSS code is fixed the issue.
#firstsModal {
overflow-y: scroll;
}
Can you check this demo: http://plnkr.co/edit/ZiQZniY1sz1xnhnxl20z?p=preview
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
