Html 以浮动的外盒为中心定位模态
我有一个引导4模式，我希望显示一点不同。我想在模型左侧显示一个浮动框 我的问题是，即使浮动框以绝对位置位于模式之外，我如何将模式框和浮动框都放置在页面中心 这就是当前的情况，浮动框的绝对位置为负左位置： 这就是我希望它看起来的样子，框和模态居中： 我不知道我需要修改多少模态才能做到这一点，因为我希望它也能响应 有没有人对我如何做到这一点有什么想法？非常感谢 谢谢，伙计们Html 以浮动的外盒为中心定位模态,html,css,twitter-bootstrap,bootstrap-modal,Html,Css,Twitter Bootstrap,Bootstrap Modal,我有一个引导4模式，我希望显示一点不同。我想在模型左侧显示一个浮动框 我的问题是，即使浮动框以绝对位置位于模式之外，我如何将模式框和浮动框都放置在页面中心 这就是当前的情况，浮动框的绝对位置为负左位置： 这就是我希望它看起来的样子，框和模态居中： 我不知道我需要修改多少模态才能做到这一点，因为我希望它也能响应 有没有人对我如何做到这一点有什么想法？非常感谢 谢谢，伙计们 。粘贴框{ 位置：绝对位置； 顶部：-40px； 左：-100px； 宽度：200px； 高度：100px； 背景颜色：
。粘贴框{
位置：绝对位置；
顶部：-40px；
左：-100px；
宽度：200px；
高度：100px；
背景颜色：绿色；
}
启动演示模式
情态标题
&时代；
...
接近
保存更改
宽度：91%和<代码>左侧：9%至<代码>模式内容。粘贴框{
位置：绝对位置；
顶部：-40px；
左：-100px；
宽度：200px；
高度：100px；
背景颜色：绿色；
}
.模态内容{
宽度：91%；
左：9%；
}
启动演示模式
情态标题
&时代；
...
接近
保存更改
transform:translate（-50%，-50%），而不是top
和left
。粘贴框{
位置：绝对位置；
宽度：200px；
高度：100px；
背景颜色：绿色；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
启动演示模式
情态标题
&时代；
...
接近
保存更改
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
这可能会对您有所帮助
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
#myModal .close{
display: none;
}
</style>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$("#myModal").modal('show');
$("#myModal2").modal('show');
});
$(".close,.close-btn").click(function(){
$("#myModal").modal('hide');
$("#myModal2").modal('hide');
});
});
</script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn">Basic</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" style="right: 50%;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
</div>
</div>
</div>
<!--/. Modal -->
<!-- Modal -->
<div class="modal fade" id="myModal2" role="dialog" style="left: 50%;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close-btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--/. Modal -->
</div>
</body>
</html>
引导示例
#myModal，关闭{
显示：无；
}
$（文档）.ready（函数（）{
$（“.btn”）。单击（函数（）{
$（“#myModal”）.modal（'show'）；
$（“#myModal2”）.modal（'show'）；
});
$（“.close，.close btn”）。单击（函数（）{
$（“#myModal”）.modal（'hide'）；
$（“#myModal2”）.modal（'hide'）；
});
});
模态示例
基本的
&时代；
模态头
模态中的一些文本
&时代；
模态头
模态中的一些文本
接近
@media