Responsive Fullscreen Modal Plugin For Bootstrap 4-iaspnetcore.com

Responsive Fullscreen Modal Plugin For Bootstrap 3 And 4 Tweet File Size: 8.21 KB Views Total: 4252 Last Update: 10 months ago Publish Date: 11 months ago Official Website: Go to website License: MIT Demo Download How to start using jQuery? More in this category... View our Recommended Plugins TOP 100 jQuery Plugins 2017 Chrome, MS Edge, FireFox, Opera, Safari#Modal#Bootstrap bs-modal-fullscreen.js is a jQuery plugin that makes your Bootstrap 3 / 4 modal component responsive and fullscreen to fit any screen size. How to use it: 1. Insert the bs-modal-fullscreen.js script to your Bootstrap 3 or 4 project. 1 <link rel="stylesheet" href="/path/to/bootstrap.min.css"> 2 <script src="/path/to/jquery.min.js"></script> 3 <script src="/path/to/bootstrap.min.js"></script> 4 <script src="dist/bs-modal-fullscreen.js"></script> 2. Add the CSS class 'modal-fullscreen' to your Bootstrap modal component. 01 <div class="modal fade modal-fullscreen" id="my<a href="https://www.jqueryscript.net/tags.php?/Modal/">Modal</a>"> 02 <div class="modal-dialog" role="document"> 03 <div class="modal-content"> 04 <div class="modal-header"> 05 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 06 <span aria-hidden="true">×</span> 07 </button> 08 <h4 class="modal-title">Modal title</h4> 09 </div> 10 <div class="modal-body"> 11 <p>One fine body…</p> 12 </div> 13 <div class="modal-footer"> 14 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 15 <button type="button" class="btn btn-primary">Save changes</button> 16 </div> 17 </div> 18 </div> 19 </div> 3. Create a trigger button to launch the modal window. 1 <button type="button" class="btn btn-lg" data-toggle="modal" data-target="#myModal" id="trigger-btn">Launch</button> 4. Make your modal window fullscreen manually. 1 $('#myModal').fullscreen(); .