I am working with angular and want to create a modal.
However I am having a lot of problems removing or editing modal-backdrop as it never takes my values in css.
It is possible to remove through data-backdrop = false, I know, but I intend to close the modal when I click outside of this, it gives not use the data-backdrop.
Can someone experienced help me? I've been at this for days and so far still nothing.
I leave my code and stackblitz to test. Thanks !
Code
Stackblitz
HTML
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Modal body..
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
As shown in this stackblitz https://stackblitz.com/edit/angular-1dh6k3
you can add
.fade.show {
background: red; // example
opacity: 1; // example
}
and you are able to edit the modal backdrop
An alternative answer without using !important (should be avoided when possible)
::ng-deep .modal-backdrop.show {
background: transparent;
}
You can try this:
.modal-backdrop {
opacity: 0 !important;
}
Related
I am using Bootstrap 5.1.3 and I would like to blur the background when a modal opens with the CSS backdrop-filter property.
The simplest approach I tried is:
.modal-backdrop {
backdrop-filter: blur(5px);
}
Live demo here: https://codepen.io/kikosoft/pen/YzjxOQm
I am using the latest Firefox browser, but the results are the same in Chrome (Windows 11).
I tried many variants suggested everywhere, but none of them work. The background simply never gets blurred. Can anybody get the background to blur with backdrop-filter? What am I missing here?
You need to change in CSS and HTML structure according below code.
Using backdrop-filter
.modal-open .modal-backdrop {
backdrop-filter: blur(5px);
background-color: rgba(0, 0, 0, 0.5);
opacity: 1 !important;
}
<script src="//cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<h1>This text should get blurred when the modal is opened.</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Using filter
.modal-open .main-wrapper {
filter: blur(5px);
}
<script src="//cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-wrapper">
<h1>This text should get blurred when the modal is opened.</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
i dont have enough rep for comment so i write my answer here:
you should apply your style to #exampleModal
#exampleModal {
backdrop-filter: blur(5px);
}
I've got two Bootstrap 3 modals as below. One modal is switching to another - and there is a button - "Go back" to previous modal. Unfortunatelly modals are long and when I'm switching back - scrolling works but for website, not for previous modal. Anyone knows how to fix it?
I'm using the default bootstrap css and js files, google chrome
Complete HTML code as below:
<head>
<!-- scripts: jquery.min.js; bootstrap.min.js css: bootstrap.min.css -->
</head>
<body>
<button type="button" data-toggle="modal" data-target="#addOffer">Add offer</button>
<button type="button" data-toggle="modal" data-target="#viewOffer">View offer</button>
first modal:
<div class="modal fade" tabindex="-1" id="viewOffer" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">View offer</h4>
</div>
<div class="modal-body">
lots of text about offer here:
<button type="button" class="btn btn-info" data-dismiss="modal" data-toggle="modal" data-target="#addOffer">Go back</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
second modal:
<div class="modal fade" id="addOffer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Add offer</h4>
</div>
<div class="modal-body">
lots of forms for new offer here:
<input id= "see_offer" name="see_offer" type="submit" class="btn btn-info" value="View offer" data-dismiss="modal" data-toggle="modal" data-target="#viewOffer" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add .modal { overflow-y:auto; } to your css file.
The regular data-toggle:"modal" button will do, as suggested, toggle the modal visibility. The buttons in your page may remain so. However, you seem to want your modal buttons to hide one modal and show another, so set a function to them manually like so:
$("[hide-modal]").click(function () {
$(this).attr("hide-modal").modal("hide");
$(this).attr("display-modal").modal("show");
});
Then in your modal buttons:
<button type="button" class="btn btn-info" hide-modal="#viewOffer" display-modal="#addOffer">Go back</button>
<button type="button" class="btn btn-info" hide-modal="#addOffer" display-modal="#viewOffer">View offer</button>
Anybody know bootstrap modal background issue?
flickering background pixels
jsfiddle
HTML
<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
I changed .fade.in opacity property on bootstrap.min.css from 1 to 0.99: .fade.in{opacity:0.99}
and that solved the problem while a better solution appears.
* update*
try this on bootstrap.min.css
.fade.in{opacity:1;-webkit-backface-visibility: hidden;}
It looks like bug in bootstrap,
i got the same issue and i found out that it caused by elements on the page that got opacity property.
i manage to reproduce it on bootstrap site
hope it will help you.
furthermore, it happen only on chrome.
I'm trying to launch a Bootstrap modal without using any buttons or jquery. I would just like show a bootstrap modal when page loads as a information and user should be able to close it using close button or it should close when clicked anywhere on the page. I have tried to use the solution from this SO question
load-without-firing-button-or-using-jquery
However, using the suggested solution prevents the modal from being closed using data-dismiss.
.modal {
display:block;
}
Is there a reason why modal doesn't close in this case ? I have tried applying seperate CSS class but it doesn't make a difference.
.mymodal {
display:block;
}
HTML
<div id="registrationModal" class="modal fade in mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
Text
</div>
</div>
</div>
Is it possible to achieve this without using jquery? or valid explanation why such thing is not possible?
The modal doesn't close because there are multiple functions that do different things when you open and close the modal. So when you open the modal the class .in, display block are added and area-hidden="true" is removed from that element. So when you click close there is reverse function. In your case just adding the display block will not work because you need to remove the class .in and remove the whole area-hidden="true" attribute.
Here is the working code:
<style>
.modal{display:block;}
</style>
<script>
$(function() {
$(".modal").addClass("in");
$(".close").click(function(){
$(".modal").removeClass("in").css("display","none").attr("aria-hidden","true");
});
});
</script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#my-modal">
Launch demo modal
</button>
<div id="my-modal" class="modal fade in">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
Hello World!
</div>
</div>
</div>
</div>
<div class="modal-backdrop fade"></div>
Sorry I know you mentioned no jQuery, but there is no CSS fix that I'm aware of, and the jQuery required for this is minimal.
I'd suggest displaying it like this, maybe If no better answer comes up you may consider it:
$('.modal').modal('show');
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="registrationModal" class="modal fade in mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
Text
</div>
</div>
</div>
i'm new to css + html and i've been stuck on a simple problem. So I got a popup window from bootstrap, the code is
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Contact Us!</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Us</h4>
</div>
<div class="modal-body">
<p>Contact us at _____</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I'm wondering how to change the padding of the button, and the color of the text.
I tried using #myModal for the css tag as shown
#myModal{
background-color: green;
padding-left:40%;
}
What am I doing wrong?
Or You can use inline CSS in:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Contact Us!</button>
Like:
"<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="color :orange; padding-left:30x;">Contact Us!</button>"
This will help i hope.
Thank You..
To change the padding and color you can do this.
Add in CSS
.btn btn-info btn-lg{
color: green;
padding-left: 30px;
}
You're probably trying to change the button outside of the modal so a simple .btn selector will work, so there is no need to select #myModal.
The custom stylesheet must be included after the bootstrap declaration for the properties to override;
.btn {
color:green;
padding-left: 50px;
}
Example here i've added some padding and a custom color so you can see how it works.