troubleshooting Question

Scrolling bar deactivated when modal appears

Avatar of fskilnik
fskilnikFlag for Brazil asked on
4 Comments1 Solution91 ViewsLast Modified:
Hi there!

I have a  modal that appears successfully 5 seconds after the homepage finished loading (as desired), in the bottom-right corner of the homepage (as desired).

This homepage is long, therefore it has a proper scrolling bar in the usual right-left corner.

Problem: when the modal appears, the scrolling is substituted by a dark column, in other words, I guess the scrolling is deactivated when the modal appears.

I want to be able to still read the homepage (using the scrolling bars) without closing the modal first, I mean, I have the opportunity to close the modal in the modal itself, but I don´t want the modal to make "the background page" be different than it was before the modal, i.e., I still want to be able to read/use the homepage as if the modal was not there (while it IS there).

Below I present all code (part A in one page, part B in another page) that I believe is relevant for the situation.  I guess some CSS property must be changed or added.

This is my problem/question, of course.


(A) HTML page:

<link rel="stylesheet" href="css/style_modal.css">

... ...  ...

<!-- Modal -->
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
                    <div class="offset-top-10 text-darker big text-bold">Register for the <span class="text-danger">Free Trial</span></div>
               <form name="MyPopUp" data-form-output="form-output-global" data-form-type="contact" method="post" action="Registration/etc.asp" onsubmit="return validateForm()"  class="text-left offset-top-30">
                        <div class="form-group">
                          <div class="input-group input-group-sm"><span class="input-group-addon input-group-addon-inverse"><span class="input-group-icon mdi mdi-account-outline"></span></span>
                            <input name="email" id="login-email" placeholder="E-mail" type="email" data-constraints="@Required @Email" class="form-control">
                                          <input name="TemporaryPswd" type="hidden" id="TemporaryPswd" value= "" />
          <button type="submit" class="btn btn-sm btn-icon btn-block btn-primary offset-top-20">Sign In <span class="icon mdi mdi-arrow-right-bold-circle-outline"></span></button>

(B) CSS page  (style_modal.css)

 @charset "UTF-8";

.modal-backdrop {background: none;} .modal-dialog {
    position: absolute;

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros