link <script src="https://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js"></script> style <style> .close{ float:right; font-size:1.5rem; font-weight:700; line-height:1; color:#000; text-shadow:0 1px 0 #fff; opacity:.5 } .close:not(:disabled):not(.disabled){ cursor:pointer } .close:not(:disabled):not(.disabled):focus,.close:not(:disabled):not(.disabled):hover{ color:#000; text-decoration:none; opacity:.75 } button.close{ padding:0; background-color:transparent; border:0; -webkit-appearance:none } .modal-open{ overflow:hidden } .modal-open .modal{ overflow-x:hidden; overflow-y:auto } .modal{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:1050; display:none; overflow:hidden; outline:0 } .modal-dialog{ position:relative; width:auto; margin:.5rem; pointer-events:none } .modal.fade .modal-dialog{ transition:-webkit-transform .3s ease-out; transition:transform .3s ease-out; transition:transform .3s ease-out,-webkit-transform .3s ease-out; -webkit-transform:translate(0,-25%); transform:translate(0,-25%) } @media screen and (prefers-reduced-motion:reduce){ .modal.fade .modal-dialog{ transition:none } } .modal.show .modal-dialog{ -webkit-transform:translate(0,0); transform:translate(0,0) } .modal-dialog-centered{ display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; min-height:calc(100% - (.5rem * 2)) } .modal-dialog-centered::before{ display:block; height:calc(100vh - (.5rem * 2)); content:"" } .modal-content{ position:relative; display:-ms-flexbox; display:flex; -ms-flex-direction:column; flex-direction:column; width:100%; pointer-events:auto; background-color:#fff; background-clip:padding-box; border:1px solid rgba(0,0,0,.2); border-radius:.3rem; outline:0 } .modal-backdrop{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:1040; background-color:#000 } .modal-backdrop.fade{ opacity:0 } .modal-backdrop.show{ opacity:.5 } .modal-header{ display:-ms-flexbox; display:flex; -ms-flex-align:start; align-items:flex-start; -ms-flex-pack:justify; justify-content:space-between; padding:1rem; border-bottom:1px solid #e9ecef; border-top-left-radius:.3rem; border-top-right-radius:.3rem } .modal-header .close{ padding:1rem; margin:-1rem -1rem -1rem auto } .modal-title{ margin-bottom:0; line-height:1.5 } .modal-body{ position:relative; -ms-flex:1 1 auto; flex:1 1 auto; padding:1rem } .modal-footer{ display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; -ms-flex-pack:end; justify-content:flex-end; padding:1rem; border-top:1px solid #e9ecef } .modal-footer>:not(:first-child){ margin-left:.25rem } .modal-footer>:not(:last-child){ margin-right:.25rem } .modal-scrollbar-measure{ position:absolute; top:-9999px; width:50px; height:50px; overflow:scroll } @media (min-width:576px){ .modal-dialog{ max-width:500px; margin:1.75rem auto } .modal-dialog-centered{ min-height:calc(100% - (1.75rem * 2)) } .modal-dialog-centered::before{ height:calc(100vh - (1.75rem * 2)) } .modal-sm{ max-width:300px } } @media (min-width:992px){ .modal-lg{ max-width:800px } }</style> html <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> js $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') })
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter