Marko, I just had the same problem. It appears that Bootstrap 3.0.0 adds a class to <body>, modal-open, when the modal first shows. This class adds margin-right: 15px to the body to account for a scrollbar, which is there on longer pages. This is great, except for shorter pages when a scrollbar isn’t on the … Read more
In Bootstrap 3.1.1 they added modal-lg and modal-sm classes. You control the modal size using @media queries like they do. This is a more global way of controlling the modal size. @media (min-width: 992px) { .modal-lg { width: 900px; height: 900px; /* control height here */ } } Sample code: <!– Large modal –> <button … Read more
You need to alter the structure of your document first. It should look something like this <body> <div class=”supreme-container”>all your content goes here except for the modal</div> <div id=”myModal” class=”modal fade”>This is your modal.</div> </body> And then in css body.modal-open .supreme-container{ -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); }
Update, as of Beta 3, [docs]: Add .modal-dialog-centered to .modal-dialog to vertically center the modal. Original answer: SCSS: .modal-dialog { min-height: calc(100vh – 60px); display: flex; flex-direction: column; justify-content: center; overflow: auto; @media(max-width: 768px) { min-height: calc(100vh – 20px); } } or unprefixed CSS: .modal-dialog { min-height: calc(100vh – 60px); display: flex; flex-direction: column; justify-content: … Read more
Use that Code $(‘#button’).submit(function(e) { e.preventDefault(); // Coding $(‘#IDModal’).modal(‘toggle’); //or $(‘#IDModal’).modal(‘hide’); return false; });
You can use the css below, put this in your custom css to override the bootstrap css. .modal-header { padding:9px 15px; border-bottom:1px solid #eee; background-color: #0480be; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
This is one way I found. You can add a hidden button: <button id=”openModalButton” [hidden]=”true” data-toggle=”modal” data-target=”#myModal”>Open Modal</button> Then use the code to “click” the button to open the modal: document.getElementById(“openModalButton”).click(); This way can keep the bootstrap style of the modal and the fade in animation.
For bootstrap 3.x.x. I have found a solution, that works with 100% CSS and no JavaScript. The trick is to show the scrollbar for modal over the scrollbar of html content. CSS: html { overflow: hidden; height: 100%; } body { overflow: auto; height: 100%; } /* unset bs3 setting */ .modal-open { overflow: auto; … Read more
Try like this : myexample it’s working correctly. hope this will help you home.module.ts import { ModalModule } from ‘ngx-bootstrap’; @NgModule({ imports: [ ModalModule.forRoot() ] }) home.component.html <button class=”btn btn-primary” (click)=”openConfirmDialog()”>Open Confirm box </button> home.component.ts import { BsModalService } from ‘ngx-bootstrap/modal’; import { BsModalRef } from ‘ngx-bootstrap/modal/modal-options.class’; export class HomeComponent { public modalRef: BsModalRef; constructor( … Read more
Add .modal { overflow: auto !important; } To your CCS. Without your code I went ahead and created this jsFiddle that recreates your issue, or at least a very similar one. Add your code and I will test if this works or not. Adding that line to the CSS fixed the issue as demonstrated with … Read more