大家好，我的modal弹出窗口有问题，modal无效但href无法正常工作我认为我的代码存在错误。
请参阅下面的代码。
他们只有链接正在处理模态内容的位置。
.modal-backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop,
.modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.modal {
position: absolute;
top: 10%;
left: 50%;
z-index: 1050;
width: 560px;
margin-left: -280px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
/* IE6-7 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
outline: none;
}
.modal.fade {
-webkit-transition: opacity .3s linear, top .3s ease-out;
-moz-transition: opacity .3s linear, top .3s ease-out;
-o-transition: opacity .3s linear, top .3s ease-out;
transition: opacity .3s linear, top .3s ease-out;
top: -25%;
}
.modal.fade.in {
top: 10%;
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
}
.modal-header .close {
margin-top: 2px;
}
.modal-header h3 {
margin: 0;
line-height: 30px;
}
.modal-body {
position: relative;
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
.modal-form {
margin-bottom: 0;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
*zoom: 1;
}
.modal-footer:before,
.modal-footer:after {
display: table;
content: "";
line-height: 0;
}
.modal-footer:after {
clear: both;
}
.modal-footer:before,
.modal-footer:after {
display: table;
content: "";
line-height: 0;
}
.modal-footer:after {
clear: both;
}
.modal-footer .btn + .btn {
margin-left: 5px;
margin-bottom: 0;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
} <li><a href='#' data-toggle="modal" data-target="#myModal11"><span><b>HR BENEFITS</b></span></a> </li>
<div class="modal fade" id="myModal11" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<img src="Clogo/HHI.png">
<p>6th Floor, Vernida IV Bldg. 128 LP Leviste St. Salcedo Village, Brgy. Bel Air, Makati City</p>
</div>
<div class="modal-body">
<h4 class="modal-title">HR Benefits</h4>
<p>__________________________________________________________________________________________________</p>
<br><br>
<p> <a href="PORTALPOLICIES/HR POLICIES AND PROCEDURES/ATTENDANCE.pdf" target="_blank"><img src="images/hr.png" width="50px" height="30px"><b> ATTENDANCE</b></a></p>
<p> <a href="PORTALPOLICIES/HR POLICIES AND PROCEDURES/CLEARANCE AND FINAL PAY.pdf" target="_blank"><img src="images/hr.png" width="50px" height="30px"><b> CLEARANCE AND FINAL PAY</b></a></p>
<p> <a href="PORTALPOLICIES/HR POLICIES AND PROCEDURES/COMPANY ISSUED DEVICES ANDOR GADGETS.pdf" target="_blank"><img src="images/hr.png" width="50px" height="30px"><b> COMPANY ISSUED DEVICES ANDOR GADGETS</b></a></p>
<p> <a href="PORTALPOLICIES/HR POLICIES AND PROCEDURES/IDENTIFICATION CARD.pdf" target="_blank"><img src="images/hr.png" width="50px" height="30px"><b> IDENTIFICATION CARD</b></a>
<p> <a href="PORTALPOLICIES/HR POLICIES AND PROCEDURES/IMAGE CODE.pdf" target="_blank"><img src="images/hr.png" width="50px" height="30px"><b> IMAGE CODE</b></p></a>
<p> <a href="PORTALPOLICIES/HR POLICIES AND PROCEDURES/MATERNITY LEAVE.pdf" target="_blank"><img src="images/hr.png" width="50px" height="30px"><b> MATERNITY LEAVE</b></p></a>
<p> <a href="PORTALPOLICIES/HR POLICIES AND PROCEDURES/MEAL ALLOWANCE.pdf" target="_blank"><img src="images/hr.png" width="50px" height="30px"><b> MEAL ALLOWANCE</b></p></a>
<p> <a href="PORTALPOLICIES/HR POLICIES AND PROCEDURES/OFFICIAL HRD ANNOUNCEMENTS.pdf" target="_blank"><img src="images/hr.png" width="50px" height="30px"><b> OFFICIAL HRD ANNOUNCEMENTS</b></p></a>
<p> <a href="PORTALPOLICIES/HR POLICIES AND PROCEDURES/OFFSETTING.pdf" target="_blank"><img src="images/hr.png" width="50px" height="30px"><b> OFFSETTING</b></p></a>
<p> <a href="PORTALPOLICIES/HR POLICIES AND PROCEDURES/OVERTIME.pdf" target="_blank"><img src="images/hr.png" width="50px" height="30px"><b> OVERTIME</b></p></a>
<p> <a href="PORTALPOLICIES/HR POLICIES AND PROCEDURES/PERFORMANCE APPRAISAL.pdf" target="_blank"><img src="images/hr.png" width="50px" height="30px"><b> PERFORMANCE APPRAISAL</b></p></a>
<p> <a href="PORTALPOLICIES/HR POLICIES AND PROCEDURES/PROBATIONARY AND REGULARIZATION.pdf" target="_blank"><img src="images/hr.png" width="50px" height="30px"><b> PROBATIONARY AND REGULARIZATION</b></p></a>
<p> <a href="PORTALPOLICIES/HR POLICIES AND PROCEDURES/SALARY DEDUCTION FOR CASH ADVANCES AND INTERNAL EMPLOYEE PURCHASES.pdf" target="_blank"><img src="images/hr.png" width="50px" height="30px"><b> SALARY DEDUCTION FOR CASH ADVANCES AND INTERNAL EMPLOYEE PURCHASES</b></p></a>
<p> <a href="PORTALPOLICIES/HR POLICIES AND PROCEDURES/TRANSPORTATION AND ACCOMMODATION ALLOWANCE.pdf" target="_blank"><img src="images/hr.png" width="50px" height="30px"><b> TRANSPORTATION AND ACCOMMODATION ALLOWANCE</b></p></a>
</div>
<div class="modal-footer">
<p align="left">This page required to use scrollbar...</p>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
答案 0 :(得分：0)
在此处显示的代码中，锚标记（href）工作正常。但我认为问题在于代码中的z-index。您应该在z-index中添加.modal-body可能会对您有帮助。
.modal-body {
max-height: 400px;
overflow-y: auto;
padding: 15px;
position: relative;
z-index: 100; /*add z-index value here as your need */
}