Skip to content

Instantly share code, notes, and snippets.

@baladkb
Created January 22, 2018 09:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save baladkb/2731293c2d50e8b5451b698f2c03e20b to your computer and use it in GitHub Desktop.
Save baladkb/2731293c2d50e8b5451b698f2c03e20b to your computer and use it in GitHub Desktop.
Bootstrap double popup scrolling issue Fix!
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</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">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet sed magna a iaculis. Sed commodo vehicula diam sed ornare. Etiam varius ex eu ex varius, at dapibus quam porttitor. Suspendisse feugiat est in venenatis viverra. Etiam diam urna, venenatis a nunc pretium, mattis euismod orci. Ut ex turpis, volutpat eget nisl eget, efficitur posuere risus. Phasellus tempor elementum turpis et blandit. Donec tortor arcu, sollicitudin porttitor pellentesque id, tincidunt sit amet orci. Aliquam erat volutpat. Maecenas sed turpis hendrerit, maximus nisi at, consectetur risus.
</p>
<p>
Praesent a accumsan purus. Morbi luctus facilisis sapien vitae ultrices. Maecenas sodales odio ac dolor vulputate sodales. Phasellus cursus tempus nisl, in fringilla lacus mattis ut. Donec feugiat nunc ex, pharetra posuere enim convallis in. Cras lacus velit, venenatis non risus eget, ultricies tincidunt erat. Cras massa dolor, laoreet eget mollis id, malesuada nec enim. Vestibulum vulputate, erat eu pharetra tincidunt, justo ante interdum justo, vel dapibus dolor orci quis ipsum. Morbi sodales vitae metus a commodo.
</p>
<p>
Duis iaculis mi sed turpis imperdiet congue. Etiam a luctus sem. Integer lacus augue, mattis vitae accumsan at, fringilla vel sapien. Vestibulum nec rutrum neque. Curabitur auctor nulla mauris, vel malesuada sapien elementum at. Ut ut erat mollis, fermentum urna sed, malesuada libero. Quisque vitae ligula placerat massa molestie luctus sed eu purus. Nam id metus vel ligula suscipit tempus sed sit amet erat. Aliquam nec facilisis nisi, et tincidunt urna.
</p>
<p>
Integer fermentum neque mauris, id hendrerit turpis fermentum et. Fusce et ullamcorper ligula. Nullam cursus mattis erat quis lacinia. Duis fringilla, enim in fringilla lobortis, ex lacus lobortis nulla, id porta nulla ipsum at est. Curabitur non ornare tortor. Cras pretium nunc massa. Mauris hendrerit lacus non elit tempor mattis. Nulla facilisi. Pellentesque in ex a sapien lobortis consequat vitae eget augue. Vivamus eu mi neque.
</p>
<p>
Etiam id urna ipsum. Pellentesque interdum dictum maximus. Nunc dui ante, blandit vitae accumsan nec, luctus viverra massa. Duis volutpat, mi gravida mollis tempor, tellus mauris vehicula erat, a imperdiet elit lectus sit amet nisl. Etiam nec consequat tellus. Nulla placerat placerat malesuada. Ut at nulla sit amet metus posuere tristique non vel elit. Aliquam gravida molestie ligula, elementum elementum odio dictum et. Aenean vel diam quis lacus sodales gravida nec sit amet urna.
</p></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
Launch demo modal
</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" data-backdrop="false" id="myModal2" 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">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet sed magna a iaculis. Sed commodo vehicula diam sed ornare. Etiam varius ex eu ex varius, at dapibus quam porttitor. Suspendisse feugiat est in venenatis viverra. Etiam diam urna, venenatis a nunc pretium, mattis euismod orci. Ut ex turpis, volutpat eget nisl eget, efficitur posuere risus. Phasellus tempor elementum turpis et blandit. Donec tortor arcu, sollicitudin porttitor pellentesque id, tincidunt sit amet orci. Aliquam erat volutpat. Maecenas sed turpis hendrerit, maximus nisi at, consectetur risus.
</p>
<p>
Praesent a accumsan purus. Morbi luctus facilisis sapien vitae ultrices. Maecenas sodales odio ac dolor vulputate sodales. Phasellus cursus tempus nisl, in fringilla lacus mattis ut. Donec feugiat nunc ex, pharetra posuere enim convallis in. Cras lacus velit, venenatis non risus eget, ultricies tincidunt erat. Cras massa dolor, laoreet eget mollis id, malesuada nec enim. Vestibulum vulputate, erat eu pharetra tincidunt, justo ante interdum justo, vel dapibus dolor orci quis ipsum. Morbi sodales vitae metus a commodo.
</p>
<p>
Duis iaculis mi sed turpis imperdiet congue. Etiam a luctus sem. Integer lacus augue, mattis vitae accumsan at, fringilla vel sapien. Vestibulum nec rutrum neque. Curabitur auctor nulla mauris, vel malesuada sapien elementum at. Ut ut erat mollis, fermentum urna sed, malesuada libero. Quisque vitae ligula placerat massa molestie luctus sed eu purus. Nam id metus vel ligula suscipit tempus sed sit amet erat. Aliquam nec facilisis nisi, et tincidunt urna.
</p>
<p>
Integer fermentum neque mauris, id hendrerit turpis fermentum et. Fusce et ullamcorper ligula. Nullam cursus mattis erat quis lacinia. Duis fringilla, enim in fringilla lobortis, ex lacus lobortis nulla, id porta nulla ipsum at est. Curabitur non ornare tortor. Cras pretium nunc massa. Mauris hendrerit lacus non elit tempor mattis. Nulla facilisi. Pellentesque in ex a sapien lobortis consequat vitae eget augue. Vivamus eu mi neque.
</p>
<p>
Etiam id urna ipsum. Pellentesque interdum dictum maximus. Nunc dui ante, blandit vitae accumsan nec, luctus viverra massa. Duis volutpat, mi gravida mollis tempor, tellus mauris vehicula erat, a imperdiet elit lectus sit amet nisl. Etiam nec consequat tellus. Nulla placerat placerat malesuada. Ut at nulla sit amet metus posuere tristique non vel elit. Aliquam gravida molestie ligula, elementum elementum odio dictum et. Aenean vel diam quis lacus sodales gravida nec sit amet urna.
</p></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal3">
Launch demo modal
</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" data-backdrop="false" id="myModal3" 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">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet sed magna a iaculis. Sed commodo vehicula diam sed ornare. Etiam varius ex eu ex varius, at dapibus quam porttitor. Suspendisse feugiat est in venenatis viverra. Etiam diam urna, venenatis a nunc pretium, mattis euismod orci. Ut ex turpis, volutpat eget nisl eget, efficitur posuere risus. Phasellus tempor elementum turpis et blandit. Donec tortor arcu, sollicitudin porttitor pellentesque id, tincidunt sit amet orci. Aliquam erat volutpat. Maecenas sed turpis hendrerit, maximus nisi at, consectetur risus.
</p>
<p>
Praesent a accumsan purus. Morbi luctus facilisis sapien vitae ultrices. Maecenas sodales odio ac dolor vulputate sodales. Phasellus cursus tempus nisl, in fringilla lacus mattis ut. Donec feugiat nunc ex, pharetra posuere enim convallis in. Cras lacus velit, venenatis non risus eget, ultricies tincidunt erat. Cras massa dolor, laoreet eget mollis id, malesuada nec enim. Vestibulum vulputate, erat eu pharetra tincidunt, justo ante interdum justo, vel dapibus dolor orci quis ipsum. Morbi sodales vitae metus a commodo.
</p>
<p>
Duis iaculis mi sed turpis imperdiet congue. Etiam a luctus sem. Integer lacus augue, mattis vitae accumsan at, fringilla vel sapien. Vestibulum nec rutrum neque. Curabitur auctor nulla mauris, vel malesuada sapien elementum at. Ut ut erat mollis, fermentum urna sed, malesuada libero. Quisque vitae ligula placerat massa molestie luctus sed eu purus. Nam id metus vel ligula suscipit tempus sed sit amet erat. Aliquam nec facilisis nisi, et tincidunt urna.
</p>
<p>
Integer fermentum neque mauris, id hendrerit turpis fermentum et. Fusce et ullamcorper ligula. Nullam cursus mattis erat quis lacinia. Duis fringilla, enim in fringilla lobortis, ex lacus lobortis nulla, id porta nulla ipsum at est. Curabitur non ornare tortor. Cras pretium nunc massa. Mauris hendrerit lacus non elit tempor mattis. Nulla facilisi. Pellentesque in ex a sapien lobortis consequat vitae eget augue. Vivamus eu mi neque.
</p>
<p>
Etiam id urna ipsum. Pellentesque interdum dictum maximus. Nunc dui ante, blandit vitae accumsan nec, luctus viverra massa. Duis volutpat, mi gravida mollis tempor, tellus mauris vehicula erat, a imperdiet elit lectus sit amet nisl. Etiam nec consequat tellus. Nulla placerat placerat malesuada. Ut at nulla sit amet metus posuere tristique non vel elit. Aliquam gravida molestie ligula, elementum elementum odio dictum et. Aenean vel diam quis lacus sodales gravida nec sit amet urna.
</p></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
$('.modal').on('hidden.bs.modal', function (e) {
if($('.modal').hasClass('in')) {
$('body').addClass('modal-open');
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment