Question

我是CSS的初学者。我正在编辑模态窗口，但我在放置时遇到问题。这个模态窗口，每当我改变浏览器的分辨率时，它都有一个定位问题，如截图所示。我需要宽度和高度尺寸以％表示。

模态HTML：

<div class="modal fade" id="erroAdocaoAindaNaoConcluida" tabindex="-1" role="dialog" aria-labelledby="erroAdocaoAindaNaoConcluidaLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" align="center">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                <span class="titulo_modal" id="erroAdocaoAindaNaoConcluidaLabel">Detectamos um erro</span>

            </div>

            <div class="modal-body" align="center">
                <p class="titulo_form"> Você só pode adotar um animal por vez.</p>
            </div>

            <div class="modal-footer">

                <button type="button" class="tamanho_btn_adotar btn-primary" data-dismiss="modal">Fechar</button>

            </div>
        </div>
    </div>
</div>

模态内容CSS：

.modal-content{
   position:relative;width:45%; 
   background-color:#fff;
   -webkit-background-clip:padding-box;
   background-clip:padding-box;
   border:1px solid #999;
   border:1px solid rgba(0,0,0,.2);
   border-radius:6px;
   outline:0;
   -webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);
   box-shadow:0 3px 9px rgba(0,0,0,.5)
}

.modal-content{
   -webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);
   box-shadow:0 5px 15px rgba(0,0,0,.5)
}

modal-body CSS：

.modal-body{position:relative;padding:15px}

模态对话框CSS：

.modal-dialog{width:600px;margin:30px auto}
.modal-dialog{
   -webkit-transform:translate(0,0);
   -ms-transform:translate(0,0);
   -o-transform:translate(0,0);
   transform:translate(0,0)
 }

.modal-dialog{
   position:relative;
   width:auto; 
   top:20px; 
   left:8%;
   margin:10px
}

Answer 1

让您的父母Div保持绝对位置。

Answer 2

@Isaac Meneses请在代码中替换以下css属性。

.modal-dialog {
    position: relative;
    margin: 30px auto;
    width: 40%;
}

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}

Answer 3

灵活实施。即使width和height设置为auto，也会有效。

＆＃13;

.modal {
  /* Just styles for demonstation */
  /* setting width and height is optional */
  width: 200px;
  height: 200px;
  border: 1px solid orange;
  
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<div class="modal">
</div>

＆＃13;

Answer 4

我已删除了你的css中的内容并添加了额外的元素，只需尝试下面的代码段

.modal-content {
	position: relative;
	width: 45%;
	background-color: #fff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #999;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 6px;
	outline: 0;
	-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
	box-shadow: 0 3px 9px rgba(0,0,0,.5);
	margin: 0 auto;
}
.modal-content {
	-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
	box-shadow: 0 5px 15px rgba(0,0,0,.5)
}
.modal-dialog {
	width: 600px;
	margin: 30px auto
}
.modal-dialog {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0)
}
.modal-dialog {
	position: relative;
	width: auto;
	top: 20px;
	margin: 10px
}
.modal-body {
	position: relative;
	padding: 15px
}
@media (max-width:480px) {
.modal-content {
	width: 100%;
}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>
<!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="erroAdocaoAindaNaoConcluidaLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" align="center">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <span class="titulo_modal" id="erroAdocaoAindaNaoConcluidaLabel">Detectamos um erro</span> </div>
      <div class="modal-body" align="center">
        <p class="titulo_form"> Você só pode adotar um animal por vez.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="tamanho_btn_adotar btn-primary" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

模态位置错误

4 个答案: