Выбрасывание контейнера modal-backrop из области действия из <footer>компонента в VueJs - PullRequest
0 голосов
/ 06 мая 2020
• 1000 первый модальный компонент: <template> <div class="Modal" style="display: inline-block;"> <a href="#" class="Modal__Button" @click.prevent="showModel=true"> <slot name="button"></slot> </a> <div :class="'modal Modal__Content fade modal__'+uniqNumber+' '+modalClass"> <div :class="modalLg?'modal-dialog modal-lg':'modal-dialog'"> <div class="lang-content"> <slot></slot> </div> </div> </div> </div> </template>

здесь я использую этот модальный:

<bs-modal>
          <template #button>
            <!--<a href="#language" data-toggle="modal" data-target="#language-popup">-->
            <img src="@/assets/images/flag.png" alt="">
          </template>
          <!--modals-->
            <div class="modal-header"  style="border-bottom: 1px solid #e5e5e5;
                   background-color: #FAFAFA;
                   padding: 15px;
                   border-radius: inherit">
              <button type="button" class="close" data-dismiss="modal">×</button>
              <h4 class="modal-title" style="float: left;">Select Your Favorte Language</h4>
            </div>
            <div class="modal-body" style="position: relative; padding: 15px;">
              <div class="row">
                <div class="col-sm-6">
                  <div id="langclick" class="item-lang" @click="myFunction">
                    <div id="sel-lang" class="select-lang"><img src="@/assets/images/select-lang.png" alt=""></div>
                    <img src="@/assets/images/flag.png">
                    <p>German</p>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div id="langclick2" class="item-lang" @click="myFunction2">
                    <div id="sel-lang2" class="select-lang"><img src="@/assets/images/select-lang.png" alt=""></div>
                    <img src="@/assets/images/US.png">
                     <p>English</p>
                  </div>
                </div>
              </div>
            </div>
        </bs-modal>
...