时间戳

首页 > 解决方案 > 如何使具有特定尺寸要求的引导模态居中

javascript - 如何使具有特定尺寸要求的引导模态居中

问题描述

我需要我的模态占据屏幕高度和宽度的 80%。无论屏幕空间如何（例如桌面或移动设备），它都需要居中。

我尝试了以下方法，但正如您所见，虽然宽度似乎有效，但高度却没有。我错过了什么？

PS SO上的输出很难看。我在jsfiddle上重新创建了示例。

body {
  text-align: center;
}

.modal-dialog {
  display: inline-block;
  vertical-align: middle;
  width: 80% !important;
  height: 80% !important;
}

.modal .modal-content {
  height: 100%;
  padding: 0px 20px 20px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<body>
  
    <h1>Heading 1</h1>
    <p>heading 2</p>
    <a href="#signupModal" data-toggle="modal">Sign-Up</a>
  
    <div class="modal" id="signupModal"
         role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
  
        <div class="modal-dialog">
            <div class="modal-content">
  
                <!-- Modal root -->
                <div class="m-header">
                    <button class="close" data-dismiss="modal">×</button>
                    <h2 class="myModalLabel">Sign Up</h2>
                </div>
  
                <!-- Modal body -->
                <div class="inputs">
                
                    <!-- username input -->
                    <div class="form-group input-group">
                        <label for="username" class="sr-only">
                          Username
                        </label>
                        <span class="input-group-addon">
                          <i class="fa fa-user"></i>
                        </span>
                        <input type="text" class="form-control" 
                               id="username" placeholder="Username">
                    </div>
  
                    <!-- Email input -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                          <i class="fa fa-envelope"></i>
                        </span>
                        <label for="email" class="sr-only">
                          Email
                        </label>
                        <input type="email" class="form-control" 
                               id="email" placeholder="Email Address">
                    </div>
                </div>
  
                <!-- Modal footer -->
                <div class="footer">
                    <button type="submit">Sign Up</button>
                </div>
  
            </div>
        </div>
    </div>
  
</body>

标签： javascripthtmlcsstwitter-bootstrapbootstrap-4

解决方案

推荐阅读