Hana Piers

Bootstrap's Modal default behavior is that it closes when you click outside the window. To disable it, Bootstrap, provided simple solution: With jQuery You can initialize the modal settings backdrop property to "static" $('#myModal').modal({ backdrop: 'static', keyboard: false }); You may noticed that we also set keyboard property to false. This is to disable the use of ESC button to close the modal. Though I would recommend this only as alternative. It is still preferred to use HTML and Bootstrap has just made it possible. Use backdrop data attribute According to Boostrap, if you set data-backdrop to "static", this will disable the modal from closing. <a data-controls-modal="#yourId" data-backdrop="static" data-keyboard="false" href="#">

In this guide, I will show you how to create a very simple pagination in PHP using Bootstrap 3. With just a few steps you will be able to create something like this: Before we start, prepare the following files and folders: - bootstrap/ - index.php - pagination.php Step 1: Download Bootstrap 3 and extract its content inside bootstrap directory: - bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js ├── fonts/ │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ └── glyphicons-halflings-regular.woff - index.php - pagination.php Step 2: Copy the basic template and paste it in index.php . Step 3: Remove the line: <h1>Hello, world!</h1> And replace with: <div class="container"> <div class="row"> <?php requi...

index.html <!-- putting the link in data-href instead of href removes the js error "Uncaught Error: Syntax error, unrecognized expression: /path/to/file --> <a class="btn btn-primary" data-href="modal_content.html" data-toggle="modal" href="#">Show Modal</a> modal_content.html <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal Title</h4> </div> <div class="modal-body"> Modal Body </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" type="button"> Close </button> <button class="btn btn-primary" type="button"> Save Ch...