Bootstrap4 Tutorial Básico

Bootstrap4 Escuta de Rolagem Bootstrap4 Mensagem de Dica

Bootstrap4 Pop-up

O controle de pop-up é semelhante ao alerta, ele é exibido após o clique do mouse no elemento, diferente do alerta, ele pode exibir mais conteúdo.

Como criar um pop-up

Adicionando data ao elemento-toggle="popover" Vamos criar um pop-up.

O conteúdo da propriedade title é o título do pop-up, data-A propriedade content exibe o texto do pop-up:

<a href="#" data-toggle="popover" title="título do pop-up" data-content="conteúdo do pop-up">Clique em mim várias vezes</a>

Atenção: O pop-up deve ser escrito no código de inicialização do jQuery: Em seguida, chame o método popover() no elemento especificado.

Os seguintes exemplos podem usar pop-ups em qualquer lugar do documento:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</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>Exemplo de Pop-up</h2>
　　<a href="#" data-toggle="popover" title="título do pop-up" data-content="conteúdo do pop-up">Clique em mim várias vezes</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Teste e Veja ‹/›

Especificar a posição do pop-up

Por padrão, o pop-up é exibido no lado direito do elemento.

Pode usar data-A propriedade placement para definir a direção de exibição do pop-up: top, bottom, left ou right:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</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>Exemplo de Pop-up</h2>　<br><br><br><br><br><br>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="top" data-content="Conteúdo">Clique aqui</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="bottom" data-content="Conteúdo">Clique aqui</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="left" data-content="Conteúdo">Clique aqui</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="right" data-content="Conteúdo">Clique aqui</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Teste e Veja ‹/›

No botão use:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</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>Exemplo de Pop-up</h2>　<br><br><br><br><br><br>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover na parte superior
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover à direita
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="bottom" data-content="Vivamus
	sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover na parte inferior
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover à esquerda
	</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Teste e Veja ‹/›

Fechar pop-up

Por padrão, o pop-up fecha ao clicar novamente no elemento especificado, você pode usar data-Propriedade trigger="focus" para definir o fechamento do pop-up ao clicar fora da área do elemento:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</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>Exemplo de Pop-up</h2>　<br>
　　<a href="#" title="Cancelar o pop-up" data-toggle="popover"　data-trigger="focus" data-content="Clique em outro lugar do documento para fechar">Clique aqui</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Teste e Veja ‹/›

Avisos:Se você quiser implementar o efeito de exibir e desaparecer ao passar o mouse sobre o elemento, você pode usar data-trigger propriedade, e defina o valor de "hover":

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</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>Exemplo de Pop-up</h2>　<br>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-trigger="hover"　data-content="Alguns conteúdos">Clique aqui</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Teste e Veja ‹/›

Bootstrap4 Escuta de Rolagem Bootstrap4 Mensagem de Dica