Почему NiceScroll не отображается на модале - PullRequest
Новая
       15

Почему NiceScroll не отображается на модале

0 голосов
/ 07 февраля 2019

Я следовал руководству, которое позволяет NiceScroll показывать на модале, но оно не срабатывает.Вот код, который поможет вам, ребята. 

$("html").niceScroll({horizrailenabled:false});
$("html").css({"overflow-x":"hidden"});
$("html").niceScroll(); 
$(".modal-open").niceScroll();

var bModalBody = bModal.find('.modal-body');

$('.modal').on('shown.bs.modal', function(e){	
  bModalBody.niceScroll({cursorcolor: "#ff0000"});
})
$('.modal').on('hide.bs.modal', function(e){	
  bModalBody.niceScroll().remove();
});
.modal-content {
    background-color:rgba(0, 0, 0, 0.6);
}
.modal-header, .modal-footer {
    border: 0!important;
}
.modal-open .modal {
    overflow-x: hidden;
}
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="user-modal" tabindex="-1" role="dialog" aria-labelledby="user-modal-content" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <img class="mod-logo" src="img/logo.png">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <div class="tab">
                    <button id="defaultOpen" class="tablinks active" onclick="openTab(event, 'Login')">Log-in</button>
                    <button class="tablinks" onclick="openTab(event, 'Register')">Register</button>
                  </div>

                  <div id="Login" class="tabcontent active">
                    <br>
                   <div class="form-group">
                    <input type="email" class="form-control" id="emailAddress" aria-describedby="emailAddress" placeholder="Email Address">
                  </div>
                  <div class="form-group">
                    <input type="password" class="form-control" id="password" placeholder="Password">
                  </div> 
                  <div class="modal-footer">
                <button type="button" class="btn btn-success">Sign In</button>
              </div>
                </div>

                <div id="Register" class="tabcontent">
                 <br> 
                  <div class="form-group">
                    <input type="text" class="form-control" id="firstname" aria-describedby="firstname" placeholder="First Name">
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" id="lastname" aria-describedby="lastname" placeholder="Last Name">
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" id="paddress" aria-describedby="physicalAddress" placeholder="Address">
                  </div>
                  <div class="form-group">
                    <input type="date" class="form-control" id="birthday" aria-describedby="birthday">
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" id="contactinfo" aria-describedby="contactinformation" placeholder="Contact Information">
                  </div>
                  <div class="form-group">
                    <input type="email" class="form-control" id="regemailAddress" aria-describedby="emailAddress" placeholder="Email Address">
                  </div>
                  <div class="form-group">
                    <input type="password" class="form-control" id="regpassword" placeholder="Password">
                  </div>
                  <div class="form-group">
                    <input type="password" class="form-control" id="con-password" placeholder="Confirm Password">
                  </div> 
                <div class="modal-footer">
                  <button type="button" class="btn btn-warning">Clear Fields</button>
                  <button type="button" class="btn btn-success">Register</button>
                </div>
                </div>

              </div>
            </div>
          </div>
        </div>

Цель этого также состоит в том, чтобы переполнить модальное значение как NiceScroll, так как -webkit-scrollbar не является лучшей полосой прокрутки вУсловия дизайна и как я хочу, чтобы мой сайт выглядел, так что да.Я надеюсь, что кто-то ответит на это, поскольку я нахожу странным, что скрипки и направляющие, которые я нашел, а моя - нет.

...