Bootstrap Модальное всплывающее окно закрывается по щелчку внутри / снаружи Модального окна в шаблоне Cursus - PullRequest
Новая
       31

Bootstrap Модальное всплывающее окно закрывается по щелчку внутри / снаружи Модального окна в шаблоне Cursus

0 голосов
/ 16 июня 2020

Я использую шаблон Cursus, который я купил на сайте Envato market. У меня проблема, когда я нажимаю на модальное всплывающее окно (как внутри, так и вне модального), модальное всплывающее окно просто закрывается (не только один модальный, но и все модальные окна, которые я разрабатываю на своем веб-сайте, делают то же самое).

Я пытаюсь добавить атрибут data-backdrop="static", а также data-keyboard="false" в свои модальные окна, но ничего не меняется.

Вот один из примеров из моего модального окна. 

<div id="rating" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Isi Rating dan Komentar</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
        </button>
      </div>
      <form action="<?= base_url('siswa/rating'); ?>" id="formKonfirmasi" method="post">
        <div class="modal-body">
          <div class="modal-body">
            <input type="hidden" name="id_siswa_jadwal_detail">
            <input type="hidden" name="jadwal_kelas_detail" id="jadwal_kelas_detail">
            <input type="hidden" name="idguru" id="idguru">
            <div class="form-group row">
              <label class="col-md-5 col-form-label">Nama Guru</label>
              <input type="text" id="namaguru" class="col-md-6 form-control" name="namaguru" readonly>
            </div>
            <div class="form-group row">
              <label class="col-md-5 col-form-label">Materi</label>
              <input type="text" class="col-md-6 form-control" name="materi" id="materi" readonly>
            </div>
            <div class="form-group row">
              <label class="col-md-5 col-form-label">Rating</label>
              <select name="rating" class="col-md-6 form-control">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
              </select>
            </div>
            <div class="form-group row">
              <label class="col-md-5 col-form-label">Komentar</label>
              <textarea class="col-md-6 form-control" name="komentar"></textarea>
            </div>
            <div class="form-group row">
              <label class="col-md-5 col-form-label">Status Guru</label>
              <div class="col-md-6 mt-2">
                <div class="form-check-inline">
                  <label class="form-check-label"><input type="radio" name="kehadiran" class="form-check-input" value="hadir">Hadir</label>
                </div>
                <div class="form-check-inline">
                  <label class="form-check-label"><input type="radio" name="kehadiran" class="form-check-input" value="tidak">Tidak Hadir</label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <input type="hidden" name='id_siswa_jadwal' value="<?php echo $this->uri->segment(3) ?>" readonly>
          <button type="submit" class="btn btn-primary mr-2" id="buttonSubmit">Kirim</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Keluar</button>
        </div>
      </form>
    </div>
  </div>
</div>

А это мои CSS и Javascript звонки: 

<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet'>
<link href='<?= base_url('assets/vendor/unicons-2.0.1/css/unicons.css') ?>' rel='stylesheet'>
<link href="<?= base_url('assets/css/vertical-responsive-menu1.min.css') ?>" rel="stylesheet">
<link href="<?= base_url('assets/css/instructor-dashboard.css') ?>" rel="stylesheet">
<link href="<?= base_url('assets/css/instructor-responsive.css') ?>" rel="stylesheet">
<link href="<?= base_url('assets/css/responsive.css') ?>" rel="stylesheet">
<link href="<?= base_url('assets/css/night-mode.css') ?>" rel="stylesheet">
<link href="<?= base_url('assets/css/style.css') ?>" rel="stylesheet">
<link href="<?= base_url('assets/css/custom.css') ?>" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.16/dist/css/bootstrap-select.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

<!-- Vendor Stylesheets -->
<link href="<?= base_url('assets/vendor/fontawesome-free/css/all.min.css') ?>" rel="stylesheet">
<link href="<?= base_url('assets/vendor/OwlCarousel/assets/owl.carousel.css') ?>" rel="stylesheet">
<link href="<?= base_url('assets/vendor/OwlCarousel/assets/owl.theme.default.min.css') ?>" rel="stylesheet">
<link href="<?= base_url('assets/vendor/bootstrap/css/bootstrap.min.css') ?>" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/vendor/semantic/semantic.min.css') ?>">
<link rel="stylesheet" href="<?= base_url('assets/css/bootstrap-select.min.css') ?>">

<script src="<?= base_url('assets/js/vertical-responsive-menu.min.js') ?>"></script>
<script src="<?= base_url('assets/js/jquery-3.3.1.min.js') ?>"></script>
<script src="<?= base_url('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>
<script src="<?= base_url('assets/vendor/OwlCarousel/owl.carousel.js') ?>"></script>
<script src="<?= base_url('assets/vendor/semantic/semantic.min.js') ?>"></script>
<script src="<?= base_url('assets/js/jquery.dataTables.min.js') ?>"></script>
<script src="<?= base_url('assets/js/dataTables.bootstrap4.min.js') ?>"></script>
<script src="<?= base_url('assets_old/assets/libs/jquery.loading.js') ?>"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.16/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.16/dist/js/i18n/defaults-en_US.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
  $.fn.selectpicker.Constructor.BootstrapVersion = '4';
  $.fn.selectpicker.Constructor.DEFAULTS.display = 'static';
</script>
<style>
body, p, h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto'
}
.mysavebtn {
  height: 40px; 
  border-radius: 20px; 
  font-family: 'Roboto'; 
  font-weight: 500;
}
</style>
...
<script src="<?= base_url('assets/js/custom.js') ?>"></script>
<script src="<?= base_url('assets/js/night-mode.js') ?>"></script>
<script>
  $('#content-table, #content-table-2, #content-table-3').DataTable();
</script>

Есть идеи?

...