javascript - Twitter Bootstrap - 放置一个大的 Popover 以覆盖屏幕的中心
问题描述
假设我的网站上有一个 Bootstrap Popover,如下所示:
HTML:
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top"
data-content="Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here.">
</button>
脚本:
$(function () {
$('[data-toggle="popover"]').popover()
})
但是,由于 Popover 的内容会很长,有没有办法让 popover 在屏幕上居中并重新调整大小以占据屏幕总面积的 75%?也许 Popover 不是这项工作的正确工具,在这种情况下,我会感谢有关使用更好组件的指导。
解决方案
我认为最好的组件是Bootstrap Modal
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Modal example</title>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
推荐阅读
- ansible - ansible lineinfile 如何添加多行与多个目标?
- c# - 如何使用 Oauth Prompt 完全退出用户?
- r - 在 R 中使用 lubridate 包进行日期格式化
- amazon-web-services - “eksctl create iamserviceaccount”在 EKS 集群的底层做了什么?
- python - 无法使用 python 正确生成 GeoTiff
- php - 将 WooCommerce 订单中的商品总量存储在数据库中
- json - 如何在使用 Cloud Scheduler 发出的 HTTP POST 请求上添加 JSON 正文?它会添加“Content-Type”:“application/json”标头吗?
- javascript - 将字符串推入数组返回一个数字而不是实际的字符串?
- c++ - 在 keil 中使用 armV5 编译器与 c99 和 cpp11
- angular - 三层架构上的 SSL 问题