Separate background fade on Bootstrap Modal - javascript

I have a website that uses Bootstrap Modals quite a bit. They worked in their normal fashion with a black faded background that would blur out the content that was on the page.
I then needed a modal that opened when a page was loaded so I used:
<div class="modal-backdrop fade in" id="purchaseModal" tabindex="-1" role="dialog">
Originally this was really transparent, so I found an answer on here that said I had to overwrite the styles using:
.modal-backdrop.fade.in{
opacity: 1 !important;
filter: alpha(opacity=100) !important;
background: #fff;
}
It worked pretty well and stopped the modal from being transparent and instead made the background white. This is fine.
However when I go back to any of the other modals on my site they no longer have the black fade that they used to, and it is now completely transparent. I'm not sure if maybe I overwrote the wrong thing, or do I need to perhaps write another class for the second modal that I need.

Try to override class with its ID or ClassName.
#purchaseModal.modal-backdrop.fade.in{
opacity: 1 !important;
filter: alpha(opacity=100) !important;
background: #fff;
}
It will only work/override with purchaseModal id, and other will remain same with their default styles.
Hope this helps you.

Are you using a external style sheet for the CSS? If so this would apply across the whole site.
It sounds as though you are looking for all modals to have the black background except the one page your looking for a different white background, is this correct?
if so you have a couple options,
You could create .modal-backdrop.fade.in.black & .modal-backdrop.fade.in.white
and change the colour accordingly in the external CSS
Or you could have your standard .modal-backdrop.fade.in overwritten to black in external CSS & in the pages where you would like the background white, simply overwrite the same style in the individual page with a style tag.
Here are examples if you require: http://www.inmotionhosting.com/support/edu/website-design/using-css/linking-your-css-to-your-website

You are applying that style to all bootstrap modals. What you should be doing is giving that modal an additional class to style is accordingly.
For example, you could name your modal with no faded background modal-with-no-background. This means you can get rid of the bad practice of overriding style declarations with !important.
.modal.no-fade + .modal-backdrop {
opacity: 0;
}

Related

Bring element on top of modal backdrop

I am trying to build a guide functionality for my application. As a part of this functionality, it is expected that a tooltip is shown next to the target HTML element and this target element is brought on top of modal backdrop that appears together with the tooltip.
The problem is that after significant effort I still cannot make HTML element show on top of the modal backdrop. Simple tricks like z-index: 10000 !important; position: relative do not help. Also changing parent elements' z-index by disabling it in Firefox Developer Tools (and leaving z-index: 10000 !important; position: relative for the target element that is supposed to be on top of the modal backdrop) does not help.
HTML of the application is quite complex with many elements. But I want to be able to "highlight" any given element by bringing it on top of the modal overlay knowing only its id. Is there an easy way to do that with JavaScript/React?
Hopefully there is a way to do this without modifying the DOM, which would be highly preferable.
UPD: Code demo - press hat button to show guide/tooltips
Remove the z-index from .form-wrapper and apply relative position with z-index for the targetted elements.
I did this by adding
d.classList.add("tooltip-active-element");
to App.js#77
Also added the class to the css file:
.tooltip-active-element {
position: relative;
z-index: 2;
background: red;
}
and removed the z-index value from other classes, the key one being the .form-wrapper class.
Working demo: https://codesandbox.io/s/tooltip-z-index-forked-fg9pt

Best way to apply Style to every other div when an outside style sheet that I have no access to is coming into play?

I'm using BXSlider and attempting to change the background of every even iteration of the slider. The problem is that a css sheet that I do not have access to is affecting all sliders on the page.
Context-
<div class="bx-wrapper">
<div class="bx-viewport">
<div class="bx-slider">
</div>
</div>
</div>
Bx-wrapper and Bx-viewport are added automatically via the bxslider library.
The css sheet (that I have no access to) has the background set to #fff-
.bx-wrapper .bx-viewport {
background: #fff;
}
I am changing the background of the slider with -
.bx-wrapper .bx-viewport:nth-child(even){
background-color: rgb(245,245,245);
}
My main problem is that the original #fff takes precedence and I can only see the above css working when I un-check that style in dev tools. What do you all think the best way to ensure that the above css takes precedence?
It sounds like your style is just being overridden by the existing stylesheet, correct?
To give your style priority over the existing stylesheet, your CSS scoping should be as specific as possible and, if necessary, contain the !important property.
For example, instead of having...
.bx-wrapper .bx-viewport:nth-child(even){
background-color: rgb(245,245,245);
}
... you might want to try...
html body .bx-wrapper .bx-viewport:nth-child(even){ /*or whatever the full scope path to your elements would be*/
background-color: rgb(245,245,245) !important;
}
I hope that's what you're looking for.

How to edit bootstrap modal inherited CSS

I'm trying to customize the CSS for a modal on my website like background colors, padding etc. The modal seems to inherit the same CSS as it's parent and when I edit the CSS on my webpage, the overrides are working fine, but the override will not extend to the same element displayed in my modal.
The CSS code that I'm trying to edit is (.grid-item-header) and I can simply create an override that works on my webpage, but the exact same (.grid-item-header), which is the same CSS that displays when viewing in developer tools within the modal. The CSS changes are not being applied though.
So far I've tried (.modal .grid-item-header) and (.modal-content .grid-item-header), but I just cannot get it to change.
.grid-item-header {background-color: #000000!important;}
.modal .grid-item-header {background-color: #000000!important;}
.modal-content .grid-item-header {background-color: #000000!important;}
I wanted the modals header background colors to change, which I did not.
You can override modal popup css by using following code, this is work for me try this once.
put this at the top of page or on conman page
#media( min-width: 768px ) {
.modal-header {
background-color: black
}
}

How do you separately style two jQuery widgets that both require jquery-ui.css?

I have a page that I've designed which uses two commercial widgets both of which require the jquery-ui.css. When both widgets are on the page, one shows the .ui-slider .ui-slider-range correctly while the other one is absent. One widget uses the jquery-ui without modification while the other widget makes specific changes to the styling of .ui-slider .ui-slider-range. I assume I need to make one a separate class/id/element. How do I do that when it is based on a specific library/template? I tried using !important but that just created other issues.
You are on the right track, you can use the console to try your styles.
What im guessing is that you made changes in a class used by other widgets like .ui-widget, try to not mess with classes like .left, .container, or anything that looks like a generic name.
What you can do to specify the element you want to change is add a container with a different class, and then use it to access the widget classes:
<div class="myFirstContainer">
// Here comes widget 1
</div>
<div class="mySecondContainer">
// Here comes widget 2
</div>
Styles:
.myFirstContainer .ui-slider{
background: red !important;
}
.mySecondContainer .ui-slider{
background: blue !important;
}

Flexslider - navigation arrow hide until hover

Currently using Flexslider and would like to be able to hide the navigation arrows which presently appear on right and left side of the image but than have them appear when the user hovers over the image. I remember it being addressed on the old site - muffin one, but cannot find it on woothemes.
Does anyone have an idea on how to change/modify/add info to do this?
Thanks in advance.
You can modify the arrows in the css. If you want the arrows to always be visible you want to change the opacity. It's currently set to 0 which makes it non-visible until hover (the hover opacity is set to 1 which is completely visible). So you want to just make it visible like so:
.flex-direction-nav a {opacity: 1;}
If you then want to change the location of the arrow you will need to simply change the margin. It is currently set to -20px. If you want to make it appear outside the box you will need to make it something like this:
.flex-direction-nav a {margin: -40px 0 0;}
If you did both your css would look like this:
.flex-direction-nav a {opacity: 1; margin: -40px 0 0;}
This would make your arrows always be visible and appear outside the image (to the right and left of the image instead of on top of the image).
You can probably accomplish this via jQuery. In my case I am using FlexSlider for Drupal so I cannot promise that you will have the same CSS selectors, but I hope this code could provide a general idea :)
$(document).ready(function(){$("div.flexslider").hover(function() {
$("a.prev").show();
$("a.next").show();
},
function() {
$("a.prev").hide();
$("a.next").hide();
});})
Good Luck!
P.S. I forgot to mention that you should set your a tag selectors in your CSS to display:none; by default.

Categories

Resources