twitter bootstrap 模式无法在手机屏幕上正常显示
twitter bootstrap modal is not coming properly on mobile screen
我已经将模式实现为弹出窗口。在桌面上它正常出现但在移动屏幕上它出现在一个角落而不是完全。
模态代码
<div class="modal fade" id="loginmodal" role="dialog" style="display:none;position: fixed;top: 50%;left: 50%;margin-top: -15%;margin-left: -25%;margin-bottom: -50px;width:80%;height:80%;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="background-color: #2E5D2E;">
<div class="modal-body">
<h1 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;font-weight: 900;font-size: xx-large;">Pick Ur Desired Location</h1>
<h5 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;">We will get back to you promptly.</h5>
<form id="loginform" name="loginform" method="get" action="/query" class="form-horizontal">
<div class="form-group">
<div class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;" >
<label for="location" style="margin-left: 24px;">Your Location</label>
<div class="col-sm-10">
<select class="selectpicker form-control" id="location" name="location" style="width: 664%;" required="true">
<option value="jaipur" disabled="disabled" selected="selected">Jaipur</option>
<option value="shimla">Shimla</option>
<option value="bangalore">Bangalore</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label" style="margin:auto; border-radius:0;color: #0E0E0E;">
<label for="username">Email Id:</label>
<div class="col-sm-10">
<input name="emailId" class="form-control" id="emailId" tabindex="1" type="email" required="true" style="width: 664%;"/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label" style="margin:auto; border-radius:0;color: #0E0E0E;">
<label for="username" style="margin-left: 5px;">Phone No:</label>
<div class="col-sm-10">
<input type="text" name="phoneno" id="phoneno" class="form-control ip_text" tabindex="2" style="width: 664%;" pattern="^([0-9]{10})?$" required="required"/>
</div>
</div>
</div>
<button type="submit" class="btn btn-success btn-block"> Submit Your Interest</button>
</form>
</div>
</div>
</div>
</div>
在手机屏幕上看起来像这样
我怎样才能使它位于屏幕中央而不破坏它在桌面等大屏幕上的位置。有人可以建议我一些想法吗？
您应用的内联样式导致了很多问题（我删除了与大小位置相关的任何内容）并且您将输入和标签放在 col-sm-2 中，而您只是想让标签本身使用 col-sm-2，而不是将输入和标签一起封装在这些列中。
<label for="location" class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;">Your Location</label>
您可以使用 jQuery 将模态窗口保持在页面中央。
查看工作示例。
$(function() {
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-dialog');
modal.css('display', 'block');
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
}
$('.modal').on('show.bs.modal', reposition);
$(window).on('resize', function() {
$('.modal:visible').each(reposition);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#loginmodal">Launch demo modal</button>
<div class="modal fade" id="loginmodal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="background-color: #2E5D2E;">
<div class="modal-body">
<h1 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;font-weight: 900;font-size: xx-large;">Pick Ur Desired Location</h1>
<h5 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;">We will get back to you promptly.</h5>
<form id="loginform" name="loginform" method="get" action="/query" class="form-horizontal">
<div class="form-group">
<label for="location" class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;">Your Location</label>
<div class="col-sm-10">
<select class="selectpicker form-control" id="location" name="location" required="true">
<option value="jaipur" disabled="disabled" selected="selected">Jaipur</option>
<option value="shimla">Shimla</option>
<option value="bangalore">Bangalore</option>
</select>
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label" style=" border-radius:0;color: #0E0E0E;">Email Id:</label>
<div class="col-sm-10">
<input name="emailId" class="form-control" id="emailId" tabindex="1" type="email" required="true" />
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label" style=" border-radius:0;color: #0E0E0E;">Phone No:</label>
<div class="col-sm-10">
<input type="text" name="phoneno" id="phoneno" class="form-control ip_text" tabindex="2" pattern="^([0-9]{10})?$" required="required" />
</div>
</div>
<button type="submit" class="btn btn-success btn-block">Submit Your Interest</button>
</form>
</div>
</div>
</div>
</div>
我已经将模式实现为弹出窗口。在桌面上它正常出现但在移动屏幕上它出现在一个角落而不是完全。 模态代码
<div class="modal fade" id="loginmodal" role="dialog" style="display:none;position: fixed;top: 50%;left: 50%;margin-top: -15%;margin-left: -25%;margin-bottom: -50px;width:80%;height:80%;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="background-color: #2E5D2E;">
<div class="modal-body">
<h1 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;font-weight: 900;font-size: xx-large;">Pick Ur Desired Location</h1>
<h5 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;">We will get back to you promptly.</h5>
<form id="loginform" name="loginform" method="get" action="/query" class="form-horizontal">
<div class="form-group">
<div class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;" >
<label for="location" style="margin-left: 24px;">Your Location</label>
<div class="col-sm-10">
<select class="selectpicker form-control" id="location" name="location" style="width: 664%;" required="true">
<option value="jaipur" disabled="disabled" selected="selected">Jaipur</option>
<option value="shimla">Shimla</option>
<option value="bangalore">Bangalore</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label" style="margin:auto; border-radius:0;color: #0E0E0E;">
<label for="username">Email Id:</label>
<div class="col-sm-10">
<input name="emailId" class="form-control" id="emailId" tabindex="1" type="email" required="true" style="width: 664%;"/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label" style="margin:auto; border-radius:0;color: #0E0E0E;">
<label for="username" style="margin-left: 5px;">Phone No:</label>
<div class="col-sm-10">
<input type="text" name="phoneno" id="phoneno" class="form-control ip_text" tabindex="2" style="width: 664%;" pattern="^([0-9]{10})?$" required="required"/>
</div>
</div>
</div>
<button type="submit" class="btn btn-success btn-block"> Submit Your Interest</button>
</form>
</div>
</div>
</div>
</div>
在手机屏幕上看起来像这样
我怎样才能使它位于屏幕中央而不破坏它在桌面等大屏幕上的位置。有人可以建议我一些想法吗？
您应用的内联样式导致了很多问题（我删除了与大小位置相关的任何内容）并且您将输入和标签放在 col-sm-2 中，而您只是想让标签本身使用 col-sm-2，而不是将输入和标签一起封装在这些列中。
<label for="location" class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;">Your Location</label>
您可以使用 jQuery 将模态窗口保持在页面中央。
查看工作示例。
$(function() {
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-dialog');
modal.css('display', 'block');
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
}
$('.modal').on('show.bs.modal', reposition);
$(window).on('resize', function() {
$('.modal:visible').each(reposition);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#loginmodal">Launch demo modal</button>
<div class="modal fade" id="loginmodal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="background-color: #2E5D2E;">
<div class="modal-body">
<h1 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;font-weight: 900;font-size: xx-large;">Pick Ur Desired Location</h1>
<h5 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;">We will get back to you promptly.</h5>
<form id="loginform" name="loginform" method="get" action="/query" class="form-horizontal">
<div class="form-group">
<label for="location" class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;">Your Location</label>
<div class="col-sm-10">
<select class="selectpicker form-control" id="location" name="location" required="true">
<option value="jaipur" disabled="disabled" selected="selected">Jaipur</option>
<option value="shimla">Shimla</option>
<option value="bangalore">Bangalore</option>
</select>
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label" style=" border-radius:0;color: #0E0E0E;">Email Id:</label>
<div class="col-sm-10">
<input name="emailId" class="form-control" id="emailId" tabindex="1" type="email" required="true" />
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label" style=" border-radius:0;color: #0E0E0E;">Phone No:</label>
<div class="col-sm-10">
<input type="text" name="phoneno" id="phoneno" class="form-control ip_text" tabindex="2" pattern="^([0-9]{10})?$" required="required" />
</div>
</div>
<button type="submit" class="btn btn-success btn-block">Submit Your Interest</button>
</form>
</div>
</div>
</div>
</div>