Rumah > hujung hadapan web > tutorial js > Betulkan Bootstrap modal&#s rootElement

Betulkan Bootstrap modal&#s rootElement

DDD
Lepaskan: 2024-12-15 22:30:14
asal
268 orang telah melayarinya

Fix Bootstrap  modal

Apabila meletakkan modal Bootstrap 5.3 di dalam bekas selain badan,

bootstrap

Kod sumber Tirai Latar mempunyai bahagian ini:

const Default = {
  className: 'modal-backdrop',
  clickCallback: null,
  isAnimated: false,
  isVisible: true, // if false, we use the backdrop helper without adding any element to the dom
  rootElement: 'body' // give the choice to place backdrop under different elements
}
Salin selepas log masuk

Walau bagaimanapun tiada mekanisme disediakan untuk menyesuaikan rootElement

Saya tetapkan seperti berikut dalam bootstrap.bundle.js versi v5.3.3

  1. Cari Tirai Latar kelas memanjangkan Config, terdapat _configAfterMerge(config)
  2. Ganti config.rootElement = ... dengan config.rootElement = getElement(config.rootElement) || dokumen.badan; dengan akan fallback ke badan jika rootElement tidak dijumpai, iaitu. null dikembalikan daripada getElement():
_configAfterMerge(config) {
      // use getElement() with the default "body" to get a fresh Element on each instantiation
      config.rootElement = getElement(config.rootElement) || document.body;
      return config;
}
Salin selepas log masuk
  1. Cari kelas Modal memanjangkan BaseComponent, terdapat _initializeBackDrop()
  2. tambah selepas isAnimated: this._isAnimated() property baharu rootElement: this._config.rootElement:
_initializeBackDrop() {
      return new Backdrop({
        isVisible: Boolean(this._config.backdrop),
        // 'static' option will be translated to true, and booleans will keep their value,
        isAnimated: this._isAnimated(),
        rootElement: this._config.rootElement
      });
}
Salin selepas log masuk

Apabila memulakan bootstrap anda dengan bootstrap baharu tambahkan rootElement: , contohnya:

const myModal = new bootstrap.Modal(
    document.getElementById('myModal')
    , {
        backdrop: "static", 
        rootElement: '#your-div'
    }
)
myModal.show()
Salin selepas log masuk

Ini adalah penggunaan saya di SPA.

// Saya mempunyai modal dinamik dalam SPA saya, jadi saya memberikan modal
// di dalam DocumentFragment dahulu dan simpan objek modal ini
// dalam pembolehubah supaya saya boleh memanggil kaedah modal selepas, seperti close()

const NILAI = {
    modal: {
        id: 'modal saya',
        obj: null
    }
}

pecahan const = document.createRange().createContextualFragment(
    `<div>




          

            
        
Salin selepas log masuk

Atas ialah kandungan terperinci Betulkan Bootstrap modal&#s rootElement. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan