x
<html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../../maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="../../ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="../../cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="../../maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script></head><body><div class="container mt-3"> <h2>Modal Options</h2> <p>The data-backdrop attribute specifies whether the modal should have a dark overlay (the background color of the current page) or not.</p> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="true">Modal with Overlay (true)</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2" data-backdrop="false">Modal without Overlay (false)</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal3" data-backdrop="static">Modal with static backdrop</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal with Dark Overlay</h4> <button type="button" class="close" data-dismiss="modal">×</button>