如何关闭Bootstrap中的模式框？
[英]How can I get my modal box in Bootstrap to close?
问题描述
我有一个模态框，无论您单击x还是屏幕上的其他任何地方，我都可以称其为好，但无法关闭它。 抱歉，如果我对它的描述不够好-我是新来的。
我已经尝试了w3学校演示和其他S / O示例，但我一生无法弄清自己在做错什么。 完整代码请参见下方。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Benny the virtual blob</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="virtualpet.css">
<link href="https://fonts.googleapis.com/css?family=Barriecito|Special+Elite&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/de2b0ad954.js"></script>
</head>
<body>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<i class="fas fa-skull-crossbones"></i><br>
<p>"Oh, no! You killed Benny!"<br>
"He was <span id="dead">x</span> days young"</p>
</div>
</div>
<div class="container">
<h1>Benny the Blob</h1>
<p>Look after Benny, the blob. Play with him, feed him, care for him when he's sick. But if you ignore him for too long, he'll die. How long will you be able to keep him alive?</p>
<button type="button" class="btn reset">Birth Benny</button>
</div>
<div class="action">
<img id="age" class="start" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561857600/virtual%20pet/item-box.png" alt="window for life span">
<img id="backing" class="start" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<div id="bennyNormal" class="start"></div>
<p id="ageStatus" class="start" ><span id="days">0</span> days old</p>
<img id="heart" class="start" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="health points image">
<img id="star" class="start" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725934/virtual%20pet/s1.png" alt="happy points image">
<img id="hungry" class="start" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725898/virtual%20pet/h1.png" alt="hunger points image">
<div id="tasks">
<img id="medicine" class="start" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561857719/virtual%20pet/medicene.png" alt="medicine">
<img id="food" class="start" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561857661/virtual%20pet/sandwich.png" alt="food">
<img id="toys" class="start" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561857776/virtual%20pet/gamesbox.png" alt="toys">
<img id="drink" class="start" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561857689/virtual%20pet/red-smoothie.png" alt="glass of juice">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="virtualpet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
var resetBtn = document.querySelector(".reset");
var start = document.querySelectorAll(".start");
var ageing = document.getElementById("days");
var heart= document.getElementById("heart");
var star = document.getElementById("star");
var tummy = document.getElementById("hungry");
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
var content = document.getElementsByClassName("modal-content")
var dead = document.getElementById("dead");
$(document).ready(function () {
var count=0;
var c = count;
var cd = $('#days');
$(resetBtn).click(function(){
$(".start").toggle();
if ($(this).text() == "Birth Benny") {
$(this).text("Restart");
} else {
$(this).text("Birth Benny");
}});
var interv = setInterval(function() {
c++;
cd.html(c);
randomNum();
happyStatus();
hungerStatus();
healthStatus();
}, 60000);
var health = 4;
var happy = 4;
var hungry = 4;
function randomNum(){
//pick a 'health'
var h=Math.random();
//pick a happy
var s=Math.random();
//pick a hungry
var f=Math.random();
if (h <0.5) {
health--;
}
if (s <0.5) {
happy--;
}
if (f <0.5) {
hungry--;
}
};
function healthStatus(){
if (health===4){
$(heart).attr("src", "https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png");
}if(health===3){
$(heart).attr("src", "https://res.cloudinary.com/dytmcam8b/image/upload/v1561725919/virtual%20pet/l2.png");
}if (health===2){
$(heart).attr("src", "https://res.cloudinary.com/dytmcam8b/image/upload/v1561725919/virtual%20pet/l3.png");
}if(health===1){
$(heart).attr("src", "https://res.cloudinary.com/dytmcam8b/image/upload/v1561725919/virtual%20pet/l4.png");
}if (health===0){
deathScreen();
}
};
function happyStatus(){
if (happy===4){
$(star).attr("src", "https://res.cloudinary.com/dytmcam8b/image/upload/v1561725934/virtual%20pet/s1.png");
}if(happy===3){
$(star).attr("src", "https://res.cloudinary.com/dytmcam8b/image/upload/v1561725934/virtual%20pet/s2.png");
}if (happy===2){
$(star).attr("src", "https://res.cloudinary.com/dytmcam8b/image/upload/v1561725934/virtual%20pet/s3.png");
}if(happy===1){
$(star).attr("src", "https://res.cloudinary.com/dytmcam8b/image/upload/v1561725934/virtual%20pet/s4.png");
}if (happy===0){
deathScreen();
}
};
function hungerStatus(){
if (hungry===4){
$(tummy).attr("src", "https://res.cloudinary.com/dytmcam8b/image/upload/v1561725898/virtual%20pet/h1.png");
}if(hungry===3){
$(tummy).attr("src", "https://res.cloudinary.com/dytmcam8b/image/upload/v1561725898/virtual%20pet/h2.png");
}if (hungry===2){
$(tummy).attr("src", "https://res.cloudinary.com/dytmcam8b/image/upload/v1561725898/virtual%20pet/h3.png");
}if(hungry===1){
$(tummy).attr("src", "https://res.cloudinary.com/dytmcam8b/image/upload/v1561725898/virtual%20pet/h4.png");
}if (hungry===0){
deathScreen();
}
};
function deathScreen(){
$(start).hide();
$('#myModal').modal('show');
$(dead).text(c);
clearInterval(interv);
};
$(span).on("click", function(){
$('#myModal').modal('toggle');
});
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
$('#myModal').modal('toggle');
}
}
});
body {
margin: 0;
text-align: center;
}
h1 {
font-family: 'Barriecito', cursive;
text-align: center;
}
p {
font-family: 'Special Elite', cursive;
text-align: left;
}
#ageStatus {
top: -850px;
left: 150px;
position: relative;
font-size: 2em;
display: none;
}
.container {
width: 600px;
margin: 0 auto;
text-align: center;
}
.btn{
background-color: pink!important;
font-family: 'Barriecito', cursive;
}
#backing {
width: 800px;
margin: 0 auto;
z-index: -10;
position: relative;
top: 0px;
display: none;
}
#bennyNormal {
width:327px;
height: 444px;
display: none;
background-image:url("https://res.cloudinary.com/dytmcam8b/image/upload/v1561677299/virtual%20pet/Sheet.png");
top: -450px;
left:250px;
position: relative;
transform: scale(0.5);
-webkit-animation: benny 3s steps(10) infinite;
-moz-animation: benny 1.5s steps(10) infinite;
-ms-animation: benny 1.5s steps(10) infinite;
-o-animation: benny 1.5s steps(10) infinite;
animation: benny 1.5s steps(10) infinite;
}
@-webkit-keyframes benny{
from{background-position:0px;}
to{background-position:-3270px;}
}
}
@keyframes normal{
from {background-position:0px;}
to {background-position:-3270px;}
}
#heart {
height: 150px;
width: 150px;
transform: scale(0.5);
top: -970px;
left: 400px;
position: relative;
display: none;
}
#star {
height: 150px;
width: 150px;
top: -970px;
left: 350px;
transform: scale(0.5);
position: relative;
display: none;
}
#hungry {
height: 80px;
width: 80px;
position: relative;
left: 330px;
top: -970px;
display: none;
}
#age {
width: 250px;
position: relative;
top: 180px;
left: 100px;
display: none;
}
#medicine {
width: 100px;
position: relative;
top: -870px;
left: 150px;
display: none;
}
#toys {
width: 100px;
position: relative;
top:-1000px;
left:-50px;
display: none;
}
.action {
position: relative;
height: 400px;
width: 800px;
margin: 0 auto;
}
#food {
width: 100px;
position: relative;
left: 440px;
top: -1000px;
display: none;
}
#drink{
width: 100px;
position: relative;
left: 240px;
top: -900px;
display: none;
}
.hidden {
display: block;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 100; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(242, 114, 223); /* Fallback color */
background-color: rgb(242, 114, 223); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid rgb(242, 114, 223);
width: 20%;
font-family: 'Barriecito', cursive;
font-size: 2em;
text-align: center;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
#dead {
text-align: center;
}
我的x无响应，也无法单击屏幕上的其他任何位置以将其关闭。 Chrome开发人员中没有错误消息。 当我将光标放在x上时，链接显示为“死”。
4 个解决方案
解决方案1
1 2019-07-02 21:47:36
根据此处的文档使用.modal('toggle') ： https ： .modal('toggle')
$('#myModal').modal('toggle');
但是在默认模态行为上，当用户单击模态窗口（灰色区域）时，它会自动关闭，请参见此处的工作方式： https : //jsfiddle.net/Lc8ayf9k/
考虑查看页面中的javascript和stylesheet参考
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
解决方案2
0 2019-07-02 21:33:43
尝试这个
$('#myModal').modal('toggle');
解决方案3
0 2019-07-02 22:03:46
如果使用的是Bootstrap，则模式设置bootstrap.js文件应该能够关闭模式。 这是Bootstrap模式的示例。
`<div id="myModal" class="modal fade" role='dialog'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>myModal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" title="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>"Oh, no! You killed Benny!"<br>
"He was <span id="dead">x</span> days young"</p>
</div>
</div>
</div>
</div>`
如果您需要自定义JavaScript来关闭模式，可以尝试以下脚本：
`<script type="text/javascript">
// Get the modal object
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>`
解决方案4
0 2019-07-03 02:35:11
我相信您附加事件监听器的方式是错误的。 如果您使用的是普通javascript，则应首先在变量内分配DOM：
var thisSpan = document.getElementById("close");
thisSpan.addEventListener("click", function(){
modal.style.display = "none";
});
使用jQuery，它要简单一些，尤其是在使用引导模式插件时。 您可以在此处遵循其他同行提供的其他解决方案。 如果它是一个自定义模态，那么我们可以使用与前面的代码类似的模式：
$("#close").on("click", function(){
modal.style.display = "none";
});
如何更改Twitter Bootstrap模式框的默认宽度？
[英]How can I change the default width of a Twitter Bootstrap modal box?
当我有2个模态时，如何在自举程序中关闭模态（弹出屏幕）
[英]how i can close the modal(popup screen) in bootstrap when I have 2 modal
如何使用最后弹出的模式上的关闭按钮关闭多个引导程序模式
[英]How can I close multiple bootstrap modals with the close button on the last popped modal
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.