I am currently working with a customized jquery alert from this SITE. I am trying to achieve a gray transparent background when the alert appears but have been unsucessful. How can I get a gray transparent screen that covers the whole background behind the alertbox? Here is my EXAMPLE
CSS
<style>
#popup_container {
font-family: Arial, sans-serif;
font-size: 12px;
min-width: 300px; /* Dialog will be no smaller than this */
max-width: 600px; /* Dialog will wrap after this width */
background: #FFF;
border: solid 5px #999;
color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#popup_title {
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.75em;
color: #666;
background: #CCC url(images/title.gif) top repeat-x;
border: solid 1px #FFF;
border-bottom: solid 1px #999;
cursor: default;
padding: 0em;
margin: 0em;
}
#popup_content {
background: 16px 16px no-repeat url(images/info.gif);
padding: 1em 1.75em;
margin: 0em;
}
#popup_content.alert {
background-image: url(images/info.gif);
}
#popup_content.confirm {
background-image: url(images/important.gif);
}
#popup_content.prompt {
background-image: url(images/help.gif);
}
#popup_message {
padding-left: 48px;
}
#popup_panel {
text-align: center;
margin: 1em 0em 0em 1em;
}
#popup_prompt {
margin: .5em 0em;
}
</style>
You need something like in this fiddle
The 'alertblanket' has an high z-index and overlays the entire page. Your dialog then must have a higher z-index to be on top of the 'alertblanket'
EDIT: You can set the color of that alert library simply by setting
$.alerts.overlayiOpacity = 0.5
$.alerts.overlayColor = '#AAA'
Or anything you like. See also the comments inside the .js file of jquery.alerts.js
Related
leaflet popup close button is not displayed. But, when I uncheck background: transparent; the close button is displayed. I already tried background: unset;, but it doesn't work. How can I remove background: transparent;?
The code below is from https://unpkg.com/leaflet#1.7.1/dist/leaflet.css
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 4px 0 0;
border: none;
text-align: center;
width: 18px;
height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif;
color: #c3c3c3;
text-decoration: none;
font-weight: bold;
background: transparent;
}
You can overwrite the css
.leaflet-container a.leaflet-popup-close-button {
background: yourOwnColor / url;
}
If you want to avoid global change then wrap up the component with a div and set a flag class to it.
.yourFlagClass .leaflet-container a.leaflet-popup-close-button {
background: yourOwnColor / url;
}
I'm styling some and my add to cart buttons look fine but I'm trying to create circular buttons for my wish lists and I'm still seeing grey behind them. I'm thinking this might be the browsers' default styling taking over but I'm not sure, has anyone ever seen something like this?
The larger "add to cart" button looks perfect. It's so weird, here's my code and a pic
.button {
color: #fff;
background: #a4cd45;
border: 1px solid #8bb43f;
padding: 10px 20px;
font-size: 135%;
margin: 0 auto;
transition: background 0.2s cubic-bezier(0.86, 0, 0.07, 1);
border-radius: 4px
}
a.button:hover {
background: #8B0204;
border-color: #8B0204;
color: white
}
.wishlist {
height: 40px;
width: 40px;
line-height: 40px;
border-radius: 40px;
color: white;
background-color: #a4cd45;
text-align: center;
margin: 17px 10px 0 0;
position: relative;
z-index: 2;
font-size: 90%;
cursor: pointer;
float:right
}
In .wishlist
Insert:
border:0;
If you want it to disappear.
P.S: You had border: 1px solid #8bb43f; for the other button, which would also work fine for this!
JSFiddle
Here I've made a Sample using a tag and as well using button element. Please have a look at the DEMO.
/*---------------Using Button Element-------------------*/
button.wishlist{
background-color: #a4cd45;
border-radius:50%;
height: 40px;
width: 40px;
border:0;/*If remove this property you will see a gray background as shows on image*/
color: rgba(255, 255, 255, 0);
display:block;
margin: 17px 10px 0 0;
position: relative;
outline:0;
cursor:pointer; /*Give an Effect of Clickable*/
}
button.wishlist:hover:before{ text-shadow: 1px 1px 1px #ef8913; }
button.wishlist:before {
content: "\f08a";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: none;
color: #fff;
font-size: 18px;
position: absolute;
top: 12px;
left: 10px;
}
/*---------------Using anchor Element-------------------*/
a.wishlist{
background-color: #a4cd45;
border-radius:50%;
height: 40px;
width: 40px;
border:0;
color: rgba(255, 255, 255, 0);
display:block;
margin: 17px 10px 0 0;
position: relative;
z-index: 2;
font-size: 90%;
cursor: pointer;
float:right;
}
a.wishlist:hover:before{ text-shadow: 1px 1px 1px #ef8913;}
a.wishlist:before {
content: "\f08a";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: none;
color: #fff;
font-size: 18px;
position: absolute;
top: 12px;
left: 10px;
}
I create a button with hover and active effect but after I created it come out extra "??" on my design.
<form id="form-login">
Login
</form>
And this is my CSS, I did change my "#form-login" to ".form-login" as well but not working. Please help me to check where is did wrong. It keep show me "??" on my design.
/* Login button */
#form-login {
/* Size and position */
width: 340px;
margin: 60px auto 30px;
padding: 15px;
position: relative;
}
#form-login .login {
/* Size and position */
width: 49%;
height: 38px;
float: left;
position: relative;
/* Styles */
border-radius: 3px;
cursor: pointer;
/* Font styles */
font-family: 'Lato', Calibri, Arial, sans-serif;
font-size: 14px;
line-height: 38px; /* Same as height */
text-align: center;
font-weight: bold;
/* Background color */
margin-right: 1%;
background: #34a5cf; /* Fallback */
background: -moz-linear-gradient(#34a5cf, #2a8ac4);
background: -ms-linear-gradient(#34a5cf, #2a8ac4);
background: -o-linear-gradient(#34a5cf, #2a8ac4);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#34a5cf), to(#2a8ac4));
background: -webkit-linear-gradient(#34a5cf, #2a8ac4);
background: linear-gradient(#34a5cf, #2a8ac4);
border: 1px solid #2b8bc7;
color: #ffffff;
text-shadow: 0 -1px rgba(0,0,0,0.3);
text-decoration: none;
}
#form-login .login:hover {
box-shadow:
inset 0 1px rgba(255,255,255,0.3),
inset 0 20px 40px rgba(255,255,255,0.15);
}
#form-login .login:active{
top: 1px;
}
I don't think it's your CSS.
Question signs ? always smell like an unicode character display problem.
Therefore the first thing to do is to check if you are using the correct encoding in your html document output. If it's not UTF-8, change it to UTF-8 and there's a good chance those question marks will "magically" turn into unicode characters instead of question marks. Just be sure to save and serve your html as UTF-8.
Hint to get you started:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type='text/css'>
/* Login button */
#form-login
{
/* Size and position */
width: 340px;
margin: 60px auto 30px;
padding: 15px;
position: relative;
}
#form-login .login
{
/* Size and position */
width: 49%;
height: 38px;
float: left;
position: relative;
/* Styles */
border-radius: 3px;
cursor: pointer;
/* Font styles */
font-family: 'Lato', Calibri, Arial, sans-serif;
font-size: 14px;
line-height: 38px; /* Same as height */
text-align: center;
font-weight: bold;
/* Background color */
margin-right: 1%;
background: #34a5cf; /* Fallback */
background: -moz-linear-gradient(#34a5cf, #2a8ac4);
background: -ms-linear-gradient(#34a5cf, #2a8ac4);
background: -o-linear-gradient(#34a5cf, #2a8ac4);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#34a5cf), to(#2a8ac4));
background: -webkit-linear-gradient(#34a5cf, #2a8ac4);
background: linear-gradient(#34a5cf, #2a8ac4);
border: 1px solid #2b8bc7;
color: #ffffff;
text-shadow: 0 -1px rgba(0,0,0,0.3);
text-decoration: none;
}
#form-login .login:hover {
box-shadow:
inset 0 1px rgba(255,255,255,0.3),
inset 0 20px 40px rgba(255,255,255,0.15);
}
#form-login .login:active{
top: 1px;
}
</style>
</script>
</head>
<body>
<form id="form-login">
Login
</form>
</body>
</html>
Copy-and-paste it into a new document, save it as "UTF-8", and then open it in your browser. You'll see there are no question signs ? (anymore).
Please note: I removed the useless spacing between the login text and the surrounding tag, changing > Login < to >Login<.
Can't figure out how I"m getting this extra white space around my image:
The markup:
<div id="member-name" hidden="true">
<button type="submit" id="btnExpandSection"><img src="~/Content/Images/plus.jpg" /></button><p id="member-fullName"></p>
</div>
the styles:
input, textarea
{
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: .9em;
margin: 5px 0 6px 0;
padding: 5px 2px 5px 5px;
width: 300px;
}
img
{
display: block; /* gets rid off any unexpected margins round the image */
border: 0px;
}
input[type="submit"], input[type="button"], button
{
background-color: #ffffff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
width: auto;
vertical-align: middle;
border: 0px;
}
td input[type="submit"], td input[type="button"], td button { font-size: 1em; }
UPDATE:
There's also this style in there:
#member-name
{
margin: 30px 0px 0px 0px;
height: 30px;
font-weight: bold;
color: white;
padding: 1px 1px 0px 1px;
background-color: #d28105;
border: 1px solid darkgray;
}
#member-fullName { margin: 0px 0px 0px 20px;}
#member-fullName p{ display: inline;float: left;overflow: hidden;}
Can't you just provide the image as a background to the button element?
#btnExpandSection {
background: #ffffff url('/Content/Images/plus.jpg') no-repeat center center;
height: /* image height */;
width: /* image width */;
}
I would start with this, and build it back from here...
button,
#member-fullName,
#member-name,
#btnExpandSection,
#btnExpandSection img {
margin: 0;
padding: 0;
}
But the following would definitely be preferably to an image nested between <button></button> tags. Replace 32px with actual width and height values of your image.
button {
background-image: url(~/Content/Images/plus.jpg);
width: 32px;
height: 32px;
}
Can't figure out how I"m getting this extra white space around my image:
The markup:
<div id="member-name" hidden="true">
<button type="submit" id="btnExpandSection"><img src="~/Content/Images/plus.jpg" /></button><p id="member-fullName"></p>
</div>
the styles:
input, textarea
{
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: .9em;
margin: 5px 0 6px 0;
padding: 5px 2px 5px 5px;
width: 300px;
}
img
{
display: block; /* gets rid off any unexpected margins round the image */
border: 0px;
}
input[type="submit"], input[type="button"], button
{
background-color: #ffffff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
width: auto;
vertical-align: middle;
border: 0px;
}
td input[type="submit"], td input[type="button"], td button { font-size: 1em; }
UPDATE:
There's also this style in there:
#member-name
{
margin: 30px 0px 0px 0px;
height: 30px;
font-weight: bold;
color: white;
padding: 1px 1px 0px 1px;
background-color: #d28105;
border: 1px solid darkgray;
}
#member-fullName { margin: 0px 0px 0px 20px;}
#member-fullName p{ display: inline;float: left;overflow: hidden;}
Can't you just provide the image as a background to the button element?
#btnExpandSection {
background: #ffffff url('/Content/Images/plus.jpg') no-repeat center center;
height: /* image height */;
width: /* image width */;
}
I would start with this, and build it back from here...
button,
#member-fullName,
#member-name,
#btnExpandSection,
#btnExpandSection img {
margin: 0;
padding: 0;
}
But the following would definitely be preferably to an image nested between <button></button> tags. Replace 32px with actual width and height values of your image.
button {
background-image: url(~/Content/Images/plus.jpg);
width: 32px;
height: 32px;
}