CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
David Foie Gras
David Foie Gras

Reputation: 2080

Bootstrap How to make modal outside can be scrolled and modal fixed?

.modal-backdrop {
  opacity: 0 !important;
}

.modal_css {
  position: fixed;
  top: 0;
  left: auto;
  right: auto;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $("#a_search_modal").click(function () {
            $("#div_modal_search").modal();
        });
    });
</script>
<body>

  <!--navbar start-->
  <nav class="navbar navbar-default navbar-fixed-top" style="background-color: transparent; max-height: 50px;">
    <div class="container-fluid" style="padding-right: 0px;">
        <ul class="nav navbar-nav" style="margin-top: 0px;margin-bottom: 0px;padding-left: 0px;">
            
            <li class=""><a href="#" class="" id="a_search_modal" style="padding: 15px"><i
                    class="glyphicon glyphicon-search" style="color:royalblue;"></i></a></li>


        </ul>
    </div>
  </nav>
  <div style="padding-top:50px;">
  top-of-div
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>1
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>2
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>3
  <br>
  <br>
  <br>
  <br>
  <br> hello
  </div>
  <!--navbar end-->
  <!-- Modal -->
  <div id="div_modal_search" class="modal fade modal_css" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content modal-content_css">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</body>

What I want to make is that modal has position just after navbar, at the same time, when I open modal, browser scrolling must not be executed.

For example, like this:

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
    position: fixed;
    top: 50px;
    background-color: #fefefe;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0} 
    to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}
</style>
</head>
<body>

<h2>Bottom Modal</h2>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>2
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>3
      <br>
      <br>
      <br>
      <br>
      <br> hello
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

</body>

As you can see in the example, I can scroll with modal opened, and when I open modal, there is no browser scrolling to the top of window.

Even I copied second snippet and pasted to the first snippet(which is using bootstrap3), It does not works well.

Maybe It's from bootstrap, but I cannot know how to fix it.

Question: How can I make first snippet working like second snippet? (1. fixed top 50px, 2. enabled to scrolling in background window even when modal opened )

Upvotes: 0

Views: 82

Answers (1)

Sudo SS
Sudo SS

Reputation: 26

to enable body scroll when launching the modal, change :

.modal-open {
overflow: hidden;

}

to

.modal-open {
overflow: visible!important;

}

Upvotes: 1

Related Questions