我正在使用php/codeIgniter。但是,我的问题与Bootstrap Modal有关。
我编写的模态的 HTML 如下:
<li><a href="#contactmodel" data-toggle="modal">Contact us</a>
<div id="contactmodel" class="modal fade cmodal" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title cus-modal-title">Contact Us | <span class="cus-modal-stitle">have your say...</span></h4>
</div>
<div class="modal-body">
<div class="col-md-10 col-md-offset-1 cus-model-margin">
<?php
$attributes = array('name' => 'contactform',
'target' => '_self',
'id' => 'contact', 'class' => 'htmlform'
);
echo form_open('contactus', $attributes);
?>
<div class="form-group">
<input type="text" class="form-control inputstyle-text" name="nick" id="nick" placeholder="Write your nick name ..." ng-model="nick" type="text" required pattern="^[A-Za-z]{5,15}$" title="Only alphabets allowed. Min. 2 & Max. 15" style="text-transform: lowercase"> <span class="glyphicon glyphicon-user" style="color: red"></span></input>
</div>
<div class="form-group">
<input type="email" class="form-control inputstyle-text" name="email" id="email" placeholder="Write your email ..." ng-model="email" required type="email" style="text-transform: lowercase"> <span class="glyphicon glyphicon-envelope" style="color: red"></span></input>
</div>
<div class="form-group">
<textarea class="form-control text-style" rows="5" name="msg" id="msg" placeholder="Anything to say ..." ng-model="text" type="msg" required pattern="^[A-Za-z]{100,300}$" title="Only alphabets allowed. Max. 300" style="text-transform: lowercase"> </textarea> <span class="glyphicon glyphicon-font" style="color: red"></span>
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary">Send <span class="glyphicon glyphicon-envelope" style="color: black"></span></button>
</div>
<?php echo form_close(); ?>
</div>
</div>
</div>
</div>
</div>
</li>
我有工作的引导程序,但是我已经为模态添加了一些自定义css,仅此而已,如下所示:
.cus-modal-title{
color: black;
text-align: left !important;
}
.cus-modal-stitle{
font-size: 10px;
}
.cus-model-margin{
margin-left: 0.333333% !important;
}
.modal.fade.in {
top: 40% !important;
}
.cmodal{
z-index: 1051 !important;
}
a:focus {
outline: thin dotted #333;
outline: 0px auto -webkit-focus-ring-color !important;
outline-offset: -2px;
}
.cus-model-body{
background: url('../images/content.png');
}
我已将模态放在带有联系我们链接的页脚中。
现在的问题是模态不会使用 Web 浏览器页面的默认滚动条滚动。我正在使用谷歌浏览器。
任何形式的帮助将不胜感激。
当我下载官方引导 css 并替换为旧的 css 时,该问题已解决,因为它已被修改。
这是因为位置属性应用于".modal-dailog"类。
如果您希望模态与浏览器滚动条一起滚动,则必须将".modal-dailog"类的位置设置为固定。我认为,默认情况下,它是绝对的,并且隐藏了浏览器的滚动条,因此用户将永远无法滚动窗口,并且模态将始终在屏幕上。
谢谢