Modal under background fade bootstrap

Question

Related Links 1) Bootstrap modal appearing under background

Bootstrap modal with background fading in

Twitter Bootstrap - why is my modal as faded as the background?

Error http://jsfiddle.net/jononomo/7z8RZ/7/

image

enter image description here

CSS/JS

     <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="~/Scripts/bootstrap.js"></script>

Code

<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">Signup</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

This is an Asp.Net MVC4 Application

This fade error is removed if i remove navigation bar css navbar navbar-inverse navbar-fixed-top but the modal location is still on left side

all the above related links define same problem but none of them help to solve mine

Do you have any custom css in the project that we can see? – Pablo Jomer Nov 08 '13 at 07:42 — Pablo Jomer, Nov 08 '13 at 07:42

score 1 · Accepted Answer · answered Nov 08 '13 at 07:42

1

in your example navbar navbar-fixed-top need z-index > 1040

answered Nov 08 '13 at 07:42

Турман Владислав

44
1

Thanks bro this did solve my problem but what about location/position error because in some page it is showing on correct location but on some page its on left and cut – Mohsin Nov 08 '13 at 07:49

score 0 · Answer 2 · answered Nov 08 '13 at 07:41

change your code to this

<!--===================navBar===================-->
<div class="navbar navbar-fixed-top"> 
<a href="#registration_modal" data-toggle="modal">
    Register
</a>
</div>
<!--===================modal====================-->
<div id="registration_modal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Register An Account</h3>
    </div>

    <div class="modal-body">
        Registration form goes here.
    </div>

    <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button class="btn btn-primary">Register</button>
    </div>

</div>

Demo:http://jsfiddle.net/7z8RZ/55/

bro its a huge project and many files are inherited from diff location it is impossible to just change code to above — Mohsin, Nov 08 '13 at 07:44

Modal under background fade bootstrap

2 Answers2