Heim >Web-Frontend >js-Tutorial >Das benutzerdefinierte BootStrap-Popover implementiert die Funktion zum Ausblenden des Klickbereichs
In diesem Artikel erfahren Sie hauptsächlich, wie Sie die benutzerdefinierte Popover- und Klickbereich-Ausblendungsfunktion von BootStrap implementieren. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Bei der Verwendung von Bootstrap ist es häufig erforderlich, irgendwo eine Hilfeschaltfläche hinzuzufügen. Beim Klicken oder Bewegen der Maus werden Hilfeinformationen abgefragt. Es scheint jedoch, dass BT keine Methode bereitstellt Wenn jemand etwas über Bootstrap weiß, kann er im Kommentarbereich eine Nachricht hinterlassen.
Der Code lautet wie folgt
Die Schaltfläche davor muss als Pop definiert sein;
Verwandte Empfehlungen:
$(function(){ $(".pop").popover({placement:'right', trigger:'manual', delay: {show: 10, hide: 10}, html: true, title: function () { return $("#src-title").html(); }, content: function () { return $("#data-content").html(); // 把content变成html }}); $('body').click(function (event) { var target = $(event.target); // 判断自己当前点击的内容 if (!target.hasClass('popover') && !target.hasClass('pop') && !target.hasClass('popover-content') && !target.hasClass('popover-title') && !target.hasClass('arrow')) { $('.pop').popover('hide'); // 当点击body的非弹出框相关的内容的时候,关闭所有popover } }); $(".pop").click(function (event) { $('.pop').popover('hide'); // 当点击一个按钮的时候把其他的所有内容先关闭。 $(this).popover('toggle'); // 然后只把自己打开。 }); });
BOOtstrap-Quellcode-Analyse-Tooltip, popover_html/css_WEB-ITnose
Bootstrap muss man lernen, Pop- Popup-Box jeden Tag (Popover) Plug-in_Javascript-Kenntnisse
Das obige ist der detaillierte Inhalt vonDas benutzerdefinierte BootStrap-Popover implementiert die Funktion zum Ausblenden des Klickbereichs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!