I am experiencing an issue with my popup where I want the background to be transparent. However, when I set the opacity in CSS to 0.5 or less, the text also becomes transparent and very dark. How can I achieve a background with 50% opacity while keeping the text at 100% opacity? Any help would be greatly appreciated :)
Here is the full HTML code: https://jsfiddle.net/Lwbmdw2g/
HTML Structure:
<div class="modal fade" id="myModall" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog imp-bg">
<div class="modal-content imp-bg">
<div class="modal-header imp-bg">
<div class="title">
<div></div>
News
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 imp-block">
<p class="mini imp-mini">
<strong>Here is the news text.</strong><br />
<br /><br />
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default imp-button" data-dismiss="modal">X</button>
</div>
</div>
</div>
</div>Script for opening the modal as requested:
<script type="text/javascript">
$(window).on('load',function(){
$('#myModall').modal('show');
});
</script>