bootstrap-modal transparent background opaque text - bootstrap-modal

Question

I am having a problem setting a bootstrap-modal as transparent with background opaque text. I tried setting the background color as RGBA, however, it still affects the text making it the same transparency now. I tried defining the background in: .modal-open, .modal-dialog, .modal-content, .modal.in and .modal-dialog — none of those worked.
HTML:
<!-- Modal -->
<div class="modal" 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>
<div class="modal-title" id="myModalLabel"><h1>ZU</h1></div>
<div class="modal-body">
<p>Do Zore World Tour 2017</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde nihil enim aperiam illum nisi tenetur facere quidem possimus libero dolorum, vitae natus cumque? Dolor sapiente fugiat culpa repudiandae, earum quisquam.</p>
</div>
<!-- email sign up form w/ button -->
<div class="container">
<div class="row">
<div class="col-md-6">
<p><form class="form-inline">
<div class="form-group">
<label for="email"></label>
<input type="email" class="form-control" id="email" placeholder="Email address*"><button type="submit" class="btn btn-default">Sign Up</button>
</div>
<div>
</div>
</form></p>
</form>
</div>
</div>
</div>
<!-- email sign up form w/ button -->
</div>
</div>
CSS:
/* modal pop up */
.modal-content {
position: relative;
background-color: rgba(250, 179, 0, 0,6;)!important;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.2);
border-radius: 0px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.modal.body{
background-color: none;
}
.modal-title h1{
font-family:;
font-size: 20.854em;
text-align: center;
color:#fab300;
}
/* modal pop up */

Answer 1

I have updated the CSS file. Please check at the codepen link here:
https://codepen.io/sushantb/pen/mwvzdR?editors=0100
The CSS file now looks like this:
* {
border-radius: 0 !important;
}
body {
background-color: #000;
}
/* LINKS */
a:hover {
color: #ffcc4d !important;
text-decoration: none;
}
a:visited {
color: #fab300 !important;
text-decoration: none;
}
/* LINKS */
/* nav bar custom*/
.navbar-inverse {
background-color: #000;
padding-top: 0px;
padding-bottom: 0px;
border: none;
padding: 0px;
margin: 0px;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ffcc4d !important; /*Sets the text hover color on navbar*/
}
.navbar-inverse .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #fab300 !important; /*BACKGROUND color for active*/
}
.navbar-toggle{
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid #fab300 !important;
border-radius: 4px;
}
.navbar-inverse .navbar-toggle .sr-only .icon-bar{
color: #fab300 !important;
}
/*.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here
}*/
.navbar-inverse .navbar-nav > li > a {
color: #fab300; /*Change active text color here*/
}
.navbar-inverse .navbar-brand > li > a:hover, .navbar-inverse .navbar-brand > li > a:focus {
color: #ffcc4d !important; /*Sets the text hover color on brand TO FIGURE OUT!!!*/
}
.navbar-inverse .navbar-brand > .active > a, .navbar-inverse .navbar-brand > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #fab300 !important; /*BACKGROUND color for active brand TO FIGUER OUT!!!*/
}
/* nav bar custom*/
/* type */
body {
background-color: white;
font-family: Scope One;
font-weight: 400;
line-height: 1.45;
color: #333;
}
p {margin-bottom: 1.3em;}
p span {
color: white;
font-weight: 900;
}
h1, h2, h3, h4 {
margin: 1.414em 0 0.5em;
font-family: Scope One;
font-weight: inherit;
line-height: 1.2;
}
h1 {
margin-top: 0;
font-size: 6.854em;
}
h2 {font-size: 4.236em;}
h3 {font-size: 2.618em;}
h4 {font-size: 1.618em;}
small, .font_small {font-size: 0.618em;}
/* type */
/* modal pop up rgba(250, 179, 0, 0,6;) */
.modal-content {
background-color: rgba(0,0,0,0.6)!important;
position: relative;
opacity: 1.0;
border: 1px solid #999;
border-radius: 50px;
outline: 0;
}
.modal.body{
background-color: green;
}
.modal-dialog {
background-color: white;
}
.modal.in .modal-dialog {
background-color: transparent;
}
.modal-title h1{
font-family:calibri;
font-size: 20.854em;
text-align: center;
color:#fab300;
opacity: 1;
padding-bottom:5px;
}
.modal-title h3{
font-family:inherit;
font-size: inherit;
text-align: center;
color:#fab300;
padding-bottom:5px;
}
.modal-body h3, p{
color: #fab300;
}
.modal-backdrop {
background-color: transparent !important; /* I kept this to show the kind of transparent effect I would like to acheive on tge modal background */
}
/* email sign up form */
.input .placeholder-shown{
color:#fab300 !important;
}
.input .placeholder{
color: #fab300;
}
.form-control{
border-top: none;
border-bottom: 1px solid #fab300;
border-left: none;
border-right: none;
box-shadow: none !important;
width: 65%;
}
.button, .input, .select, .textarea{
color:#fab300 !important
border-top: 1px solid #fab300 !important;
border-bottom: 1px solid #fab300!important;
border-left: 1px solid #fab300 !important;
border-right: 1px solid #fab300 !important;
box-shadow: none !important;
}
.form-inline .btn .btn-default{
border-top: 1px solid #fab300 !important;
border-bottom: 1px solid #fab300!important;
border-left: 1px solid #fab300 !important;
border-right: 1px solid #fab300 !important;
box-shadow: none !important;
}
/* email sign up form */
/* modal pop up rgba(250, 179, 0, 0,6;) */
/* overlay */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .5s ease;
background-color: rgba(250, 179, 0,.2;)!important;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: #fab300;
font-size: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
/* .overlay .btn .btn-primary .btn-lg{
}*/
/* CTA button color override */
.btn-primary, .btn-primary:active, .btn-primary:visited, .btn-primary:focus {
background-color: #fab300 !important;
/* background-color: rgba(250, 179, 0,.6;)!important -- I WOULD LIKE TO HAVE IT TRANSPARENT*/
border-color: #fab300 !important;
font-family: 'Scope One', serif;
font-color:#fff !important;
font-size: 16px;
font-style: bold;
text-transform: none;
color: white;
vertical-align: center;
text-align: center;
}
.btn-primary:hover{
background-color: #ffcc4d !important;
border-color: #ffcc4d !important;
}
/* overlay */
/* Tour - Table */
.table .table-inverse{
border-spacing: 0;
background-color: rgba(250, 179, 0,.6;);
}
.table .table-inverse .td {
padding: 0;
}
/* Tour - Table */
Please review and revert.
Regards,
Sushant