i have a problem with my popup i want the background to be transparent but when i set opacity in css to 0.5 or less the text also is transparent and very dark. How can i set the background to 50% opacity but the text is still 100%? Help would be nice :)

Heres the full code: /

Here the html:

  <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>Hier steht der 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>

Here the modal opening as requested:

<script type="text/javascript">
$(window).on('load',function(){
    $('#myModall').modal('show');
});
</script>

i have a problem with my popup i want the background to be transparent but when i set opacity in css to 0.5 or less the text also is transparent and very dark. How can i set the background to 50% opacity but the text is still 100%? Help would be nice :)

Heres the full code: https://jsfiddle/Lwbmdw2g/

Here the html:

  <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>Hier steht der 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>

Here the modal opening as requested:

<script type="text/javascript">
$(window).on('load',function(){
    $('#myModall').modal('show');
});
</script>

• javascript
• html
• css
• popup

Share Improve this question Follow edited May 18, 2017 at 10:37 C.S asked May 18, 2017 at 10:24 C.SC.S 1311 gold badge11 silver badge55 bronze badges 4

• 2 If you want the background to be transparent you can use rgba(0,0,0,0.5); and it won't affect the text – Albzi Commented May 18, 2017 at 10:27
• already tried that but doesn't work – C.S Commented May 18, 2017 at 10:28
• Where is the HTML code/element where you trigger the opening of the modal? Is it possible to include that code as well please? – kevin b. Commented May 18, 2017 at 10:34
• added the opening script to question – C.S Commented May 18, 2017 at 10:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

As Albzi mentioned using rgba works. Change your imp-bg style to this.

.imp-bg{background:rgba(0,0,0,0.7);}

I thing it will help u. set your background opacity according to your need.

#myModall { background: rgba(0,0,0,.5); }

<div class="modal-dialog imp-bg">

.modal-dialog imp-bg
{
    opacity: 0.5;
    background-color: rgb(10, 10, 10);
}