Question

我最近开始学习css，并且在创建弹出窗口时我的宽度有问题。它改变了页面，标题被推到了左边。

<!DOCTYPE html>
<html>
<head>
  <title>Title</title>
  <%= stylesheet_link_tag    'application','//fonts.googleapis.com/css?family=Roboto:100', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
    <%= render 'layouts/header' %>

    <div class="container">
        <% if notice %> 

            <div id="flash_wrapper">
  <p class="alert alert-notice"><%= notice %></p>
      </div>
      <% elsif alert %> 
          <div id="flash_wrapper">
  <p class="alert alert-info"><%= alert %></p>
      </div>
      <% end %> 

        <%= yield %>
    </div>



</body>
</html>

页面的Css

 body {
  margin: 0;
    background: url(37.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.modal.fade .modal-dialog {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
    top: 300px;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.modal.fade.in .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
    opacity: 1;
}

动画弹出窗口

<p class='text-center'>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#demo">
  Open Modal
</button>
</p>

<div class="modal fade" id="demo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h1 class="modal-title">Demo Modal</h1>
      </div>
      <div class="modal-body">
        Pretty Nifty eh?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

如果模态对话框有

，我无法在CSS中看到

position:absolute

这可能是弹出窗口放在其他内容之上所需要的。

弹出窗口扭曲并推动页面宽度，我该如何解决？

1 个答案: