Il controllo del riquadro di pop-up è simile al riquadro di notifica, viene visualizzato dopo aver cliccato sull'elemento, diversamente dal riquadro di notifica può visualizzare più contenuto.
Come creare un riquadro di pop-up
Aggiungendo data-toggle="popover" all'elemento
Creiamo un riquadro di pop-up.
Il contenuto dell'attributo title è il titolo del riquadro di pop-up, l'attributo data-content mostra il testo del contenuto del riquadro di pop-up:
<a href="#" data-toggle="popover" title="Titolo del riquadro di pop-up" data-content="Contenuto del riquadro di pop-up">Clicca più volte qui</a>
Attenzione: I riquadri di pop-up devono essere scritti nel codice di inizializzazione di jQuery: quindi chiamare il metodo popover() sull'elemento specificato.
Esempi di riquadri di pop-up possono essere utilizzati in qualsiasi parte del documento:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap esempio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Esempio di riquadro di pop-up</h2>
<a href="#" data-toggle="popover" title="Titolo del riquadro di pop-up" data-content="Contenuto del riquadro di pop-up">Clicca più volte qui</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Per impostazione predefinita, il riquadro di pop-up viene visualizzato sulla destra dell'elemento.
Puoi utilizzare l'attributo data-placement per impostare la direzione di visualizzazione del riquadro di pop-up: in alto, in basso, a sinistra o a destra:
Per impostazione predefinita, la finestra di pop-up viene chiusa dopo aver fatto clic di nuovo sull'elemento specificato, puoi impostare l'attributo data-trigger="focus" per chiudere la finestra di pop-up facendo clic sull'area esterna dell'elemento:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap esempio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Esempio di Finestra Emergente</h2> <br>
<a href="#" title="Annulla il pop-up" data-toggle="popover" data-trigger="focus" data-content="Fai clic su un'altra parte del documento per chiudere me">Clicca qui</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Suggerimento:Se desideri ottenere l'effetto di visualizzazione e scomparsa dell'elemento quando il mouse si muove su di esso, puoi utilizzare l'attributo data-trigger e impostare il valore
"hover":