Kotak pop timbul BootStrap (Popover) menyokong menggerakkan tetikus ke atas lapisan pop timbul. Sebab dan penyelesaian untuk lapisan tetingkap timbul tidak disembunyikan.-tutorial js-php.cn

Kotak pop timbul BootStrap (Popover) menyokong menggerakkan tetikus ke atas lapisan pop timbul. Sebab dan penyelesaian untuk lapisan tetingkap timbul tidak disembunyikan.

PHPz

Lepaskan： 2018-09-28 14:44:16

asal

2648 orang telah melayarinya

Popover adalah serupa dengan Tooltip, memberikan paparan yang diperluaskan. Untuk mengaktifkan popover, pengguna hanya menuding pada elemen. Kandungan kotak pop timbul boleh diisi sepenuhnya menggunakan API Data Bootstrap. Kaedah ini bergantung pada petua alat.

1 Tetapkan kelewatan Jika tetingkap pop timbul tidak dialihkan selepas kelewatan, tetingkap timbul akan disembunyikan >

2 Kawalan tidak boleh Kod yang hilang

Tooltip.prototype.init = function{中的
var triggers = this.options.trigger.split(&#39; &#39;)后面加上
//设置延时
if (this.options.trigger.indexOf(&#39;hover&#39;) > -1) {
$.extend(true, this.options, { delay: { hide: 100 } });
}

Salin selepas log masuk

ditambah selepas

clearTimeout(self.timeout) dalam Tooltip.prototype.enter = function (obj) { >

Berikut ialah tambahan kepada penggunaan kotak timbul (Popover)

Pemalam kotak timbul (Popover) menjana kandungan dan teg mengikut keperluan Secara lalai, Popovers diletakkan di belakang elemen pencetusnya. Anda boleh menambah popover dalam dua cara:

if (self.options.trigger.indexOf(&#39;hover&#39;) > -1) {
self.$tip.unbind(&#39;mouseenter&#39;).bind(&#39;mouseenter&#39;, function (e) {
self.$tip.data(&#39;data-element&#39;, self.$element);//触发popover框的点击事件时可以获取id
clearTimeout(self.timeout);
self.hoverState = &#39;in&#39;;
}).unbind(&#39;mouseleave&#39;).bind(&#39;mouseleave&#39;, function (e) {
self.hoverState = &#39;out&#39;;
self.timeout = setTimeout(function () {
if (self.hoverState == &#39;out&#39;) self.hide()
}, self.options.delay.hide)
})
}

Salin selepas log masuk

Melalui atribut data: Untuk menambah popover, cuma tambah data-toggle= pada teg anchor/button Just "popover". Tajuk sauh ialah teks popover. Secara lalai, pemalam meletakkan popover di bahagian atas.

Melalui JavaScript: Dayakan popover melalui JavaScript:

Pemalam popover tidak seperti menu lungsur yang dibincangkan sebelum ini Seperti pemalam lain, ia bukan pemalam CSS tulen. Untuk menggunakan pemalam, anda mesti mengaktifkannya menggunakan jquery (baca javascript). Gunakan skrip berikut untuk mendayakan semua popover pada halaman:

<a href="#" data-toggle="popover" title="Example popover">
请悬停在我的上面
</a>

Salin selepas log masuk

Di atas ialah keseluruhan kandungan artikel ini Untuk lebih banyak tutorial berkaitan, sila lawati

Tutorial Video Bootstrap

$(&#39;#identifier&#39;).popover(options)

Salin selepas log masuk