Как управлять кнопкой и модальным всплывающим окном, когда кнопка установлена ​​на боковой панели и отображать внешнюю боковую панель с помощью позиции? - PullRequest
Новая
       24

Как управлять кнопкой и модальным всплывающим окном, когда кнопка установлена ​​на боковой панели и отображать внешнюю боковую панель с помощью позиции?

1 голос
/ 18 марта 2019

Я установил кнопку внутри боковой панели и отобразил половину внешней боковой панели, используя z-index и установил z-index: 0 на правой панели для просмотра наложения кнопок обоих div, теперь, когда я откройте модальное всплывающее окно, затем выдайте z-index и модальное всплывающее окно отобразите внутреннюю часть оверлея , я не могу изменить структуру html боковой панели.

Как правильно отобразить модальное всплывающее окно и переключатель боковой панели только с изменениями CSS?

Выпуск

Issue facing

Что я хочу?

enter image description here

.sidebar {
  position: fixed;
  top: 0;
  height: 100%;
  bottom: 0;
  width: 220px;
  left: 0;
  -webkit-transition: all .5s;
  -moz--webkit-transition: all .5s;
  -ms--webkit-transition: all .5s;
  transition: all .5s;
  z-index: 1;
}

.sidebar::after {
  display: block;
  content: "";
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #2f323a;
}

.sidebar .sidebar-wrapper {
  position: relative;
  height: calc(100vh - 75px); // overflow-x: hidden;
  width: 220px;
  z-index: 4;
}

.main-panel {
    position: relative;
    margin-left: 220px;
    background-color: #edeff5;
    transition: all .5s;
    z-index: 0;
}

.navbar-wrapper {
  position: absolute;
  right: -15px;
  z-index: 99999;
  top: 15px;
}

.sidebar .btn-round {
    float: left;
    height: 35px;
    width: 35px;
    padding: 0;
    font-size: 16px;
    position: relative;
    line-height: 35px;
    border-radius: 30px;
    outline: 0 !important;
    background-color: #2f323a;
    color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="wrapper">
        <div class="sidebar">

            <div class="navbar-wrapper">
                <button class="btn btn-round">B</button>
                <div class="navbar-toggle">
                    <button class="navbar-toggler" type="button">
                        <span class="navbar-toggler-bar bar1"></span>
                        <span class="navbar-toggler-bar bar2"></span>
                        <span class="navbar-toggler-bar bar3"></span>
                    </button>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="sidebar-wrapper">
            </div>
        </div>
        <div class="main-panel">
            <nav class="navbar">
                <div class="navbar-right-wrapper">
                    <div class="input-group no-border">
                        <input class="form-control" placeholder="Search..." type="text" value="">
                        <div class="input-group-text">
                            <i class="nc-icon nc-zoom-split"></i>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>                 
                <div class="clearfix"></div>
            </nav>
            <div class="main-content">
              <!-- Trigger the modal with a button -->
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

              <!-- Modal -->
              <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">

                  <!-- Modal content-->
                  <div class="modal-content">
                    <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>
            </div>
        </div>
    </div>

Если я удаляю z-index главной панели, то все работает нормально, но переключатель боковой панели не отображается.

Ответы [ 2 ]

2 голосов
/ 18 марта 2019

Удалить z-index на .main-panel и изменить .sidebar z-index:3

.main-panel {
    position: relative;
    margin-left: 220px;
    background-color: #edeff5;
    transition: all .5s;
    /*z-index:0*/
}


.sidebar {
  position: fixed;
  top: 0;
  height: 100%;
  bottom: 0;
  width: 220px;
  left: 0;
  -webkit-transition: all .5s;
  transition: all .5s;
  z-index: 3;
}

.sidebar::after {
  display: block;
  content: "";
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #2f323a;
}

.sidebar .sidebar-wrapper {
  position: relative;
  height: calc(100vh - 75px); // overflow-x: hidden;
  width: 220px;
  z-index: 4;
}

.main-panel {
    position: relative;
    margin-left: 220px;
    background-color: #edeff5;
    transition: all .5s;
}

.navbar-wrapper {
  position: absolute;
  right: -15px;
  z-index: 99999;
  top: 15px;
}

.sidebar .btn-round {
    float: left;
    height: 35px;
    width: 35px;
    padding: 0;
    font-size: 16px;
    position: relative;
    line-height: 35px;
    border-radius: 30px;
    outline: 0 !important;
    background-color: #2f323a;
    color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="wrapper">
        <div class="sidebar">

            <div class="navbar-wrapper">

                <button class="btn btn-round">
                 B
                </button>

                <div class="navbar-toggle">
                    <button class="navbar-toggler" type="button">
                        <span class="navbar-toggler-bar bar1"></span>
                        <span class="navbar-toggler-bar bar2"></span>
                        <span class="navbar-toggler-bar bar3"></span>
                    </button>
                </div>



                <div class="clearfix"></div>

            </div>
            <div class="sidebar-wrapper">
            </div>
        </div>
        <div class="main-panel">
            <nav class="navbar">


                <div class="navbar-right-wrapper">
                    <div class="input-group no-border">
                        <input class="form-control" placeholder="Search..." type="text" value="">
                        <div class="input-group-text">
                            <i class="nc-icon nc-zoom-split"></i>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
             
                <div class="clearfix"></div>

            </nav>
            <div class="main-content">
              <!-- Trigger the modal with a button -->
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

              <!-- Modal -->
              <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">

                  <!-- Modal content-->
                  <div class="modal-content">
                    <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>
            </div>
        </div>
    </div>
0 голосов
/ 18 марта 2019

есть некоторые изменения в структуре, которые помогают ее решить. 

.sidebar {
  position: fixed;
  top: 0;
  height: 100%;
  bottom: 0;
  width: 220px;
  left: 0;
  -webkit-transition: all .5s;
  transition: all .5s;
  z-index: 1;
}

.sidebar::after {
  display: block;
  content: "";
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #2f323a;
}

.sidebar .sidebar-wrapper {
  position: relative;
  height: calc(100vh - 75px); // overflow-x: hidden;
  width: 220px;
  z-index: 4;
}

.main-panel {
    position: relative;
    margin-left: 220px;
    background-color: #edeff5;
    transition: all .5s;
    z-index: 0;
}

.navbar-wrapper {
  position: absolute;
  right: -15px;
  z-index: 99999;
  top: 15px;
}

.sidebar .btn-round {
    float: left;
    height: 35px;
    width: 35px;
    padding: 0;
    font-size: 16px;
    position: relative;
    line-height: 35px;
    border-radius: 30px;
    outline: 0 !important;
    background-color: #2f323a;
    color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="wrapper">
        <div class="sidebar">

            <div class="navbar-wrapper">

                <button class="btn btn-round">
                 B
                </button>

                <div class="navbar-toggle">
                    <button class="navbar-toggler" type="button">
                        <span class="navbar-toggler-bar bar1"></span>
                        <span class="navbar-toggler-bar bar2"></span>
                        <span class="navbar-toggler-bar bar3"></span>
                    </button>
                </div>



                <div class="clearfix"></div>

            </div>
            <div class="sidebar-wrapper">
            </div>
        </div>
        <div class="main-panel">
            <nav class="navbar">


                <div class="navbar-right-wrapper">
                    <div class="input-group no-border">
                        <input class="form-control" placeholder="Search..." type="text" value="">
                        <div class="input-group-text">
                            <i class="nc-icon nc-zoom-split"></i>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
             
                <div class="clearfix"></div>

            </nav>
            <div class="main-content">
              <!-- Trigger the modal with a button -->
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

              <!-- Modal -->

            </div>
        </div>
    </div>
	              <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">

                  <!-- Modal content-->
                  <div class="modal-content">
                    <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...