模态弹出窗口不显示图像
Modal popover not showing image
任务是插入一个简单的模式弹出窗口作为提醒,通知客户临时搬迁。在页面加载时,会出现透明背景,但会出现图像或关闭按钮。
数据
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/popover.js"></script>
<script src="../js/jquery-1.12.4.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalContent {
width: 750px;
z-index: 10000;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: none;
background: -moz-linear-gradient;
background: -webkit-linear-gradient;
background: -o-linear-gradient;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
</style>
代码
<div id="myModal" class="modal fade in">
<div class="modalDialog">
<div class="modalContent">
<a href="#close" title="Close" class="close">X</a>
<img src="image.jpg" width="750px"/>
</div>
</div>
</div>
这似乎是一项相当简单的任务,但我似乎无法通过多次尝试来解决这个问题。非常感谢您的帮助。
我不知道 popover 插件,但我已经使用 bootstrap 插件为此创建了 fiddle,当页面打开时,模态将出现一些内容(您可以将其替换为你的内容)。
样本HTML:
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
和JS
$(document).ready(function(){
$("#myModal").modal('show');
});
注意:我没有包括 popover.js。
任务是插入一个简单的模式弹出窗口作为提醒,通知客户临时搬迁。在页面加载时,会出现透明背景,但会出现图像或关闭按钮。
数据
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/popover.js"></script>
<script src="../js/jquery-1.12.4.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalContent {
width: 750px;
z-index: 10000;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: none;
background: -moz-linear-gradient;
background: -webkit-linear-gradient;
background: -o-linear-gradient;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
</style>
代码
<div id="myModal" class="modal fade in">
<div class="modalDialog">
<div class="modalContent">
<a href="#close" title="Close" class="close">X</a>
<img src="image.jpg" width="750px"/>
</div>
</div>
</div>
这似乎是一项相当简单的任务,但我似乎无法通过多次尝试来解决这个问题。非常感谢您的帮助。
我不知道 popover 插件,但我已经使用 bootstrap 插件为此创建了 fiddle,当页面打开时,模态将出现一些内容(您可以将其替换为你的内容)。
样本HTML:
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
和JS
$(document).ready(function(){
$("#myModal").modal('show');
});
注意:我没有包括 popover.js。