如何让 bootstrap 模式在我的代码中工作?
How do I get the bootstrap modal to work in my code?
嘿,我只是无法调出使用 bootstrap 的模态。从理论上讲,我有一个从另一个网站获取的口袋妖怪列表。然后每个口袋妖怪都应该充当一个按钮,然后我可以点击并接收更多信息。我会很感激一些帮助,因为我很迷路。
谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple JS App</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header class="page-header">
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-target="#myModal" data-toggle="modal" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<h1>Pokedex</h1>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" data-target="#myModal" data-toggle="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<ul class="list-group"></ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</body>
</html>
JS
let pokemonRepository = (function () {
let pokemonList = [];
let apiUrl = 'https://pokeapi.co/api/v2/pokemon/?limit=150';
function add(pokemon) {
pokemonList.push(pokemon);
}
function getAll() {
return pokemonList;
}
function addListItem(pokemon) {
let pokemonList = document.querySelector('.list-group');
let listPokemon = document.createElement('li');
listPokemon.classList.add('group-list-item');
let button = document.createElement('button');
button.innerText = pokemon.name;
button.classList.add('btn');
pokemonList.appendChild(listPokemon);
listPokemon.appendChild(button);
button.addEventListener('click', function(event) {
showDetails(pokemon);
});
}
function loadList() {
return fetch(apiUrl).then(function (response) {
return response.json();
}).then(function (json) {
json.results.forEach(function (item) {
let pokemon = {
name: item.name,
detailsUrl: item.url
};
add(pokemon);
console.log(pokemon);
});
}).catch(function (e) {
console.error(e);
});
}
function loadDetails(item) {
let url = item.detailsUrl;
return fetch(url).then(function (response) {
return response.json();
}).then(function (details) {
// Now we add the details to the item
item.imageUrl = details.sprites.front_default;
item.height = details.height;
item.types = details.types;
}).catch(function (e) {
console.error(e);
});
}
function showDetails(pokemon) {
loadDetails(pokemon).then(function () {
showModal(pokemon);
});
};
function showModal(item) {
let modalContainer = document.querySelector('#myModal');
modalContainer.classList.add('is-visible');
// Clear all existing modal content
modalContainer.innerHTML = '';
modalContainer.addEventListener('click', (e) => {
// Since this is also triggered when clicking INSIDE the modal
// We only want to close if the user clicks directly on the overlay
let target = e.target;
if (target === modalContainer) {
hideModal();
}
});
let modal = document.createElement('div');
modal.classList.add('modal');
// Add the new modal content
let closeButtonElement = document.createElement('button');
closeButtonElement.classList.add('modal-close');
closeButtonElement.innerText = 'Close';
closeButtonElement.addEventListener('click', hideModal);
let titleElement = document.createElement('h1');
titleElement.innerText = item.name + (': ') + ('height = ') + item.height;
let container = document.querySelector('#image-container');
let myImage = document.createElement('img');
myImage.src = item.imageUrl;
modal.appendChild(closeButtonElement);
modal.appendChild(titleElement);
modalContainer.appendChild(modal);
modal.appendChild(myImage);
}
function hideModal() {
let modalContainer = document.querySelector('#myModal');
modalContainer.classList.remove('is-visible');
}
window.addEventListener('keydown', (e) => {
let modalContainer = document.querySelector('#myModal');
if (e.key === 'Escape' && modalContainer.classList.contains('is-visible')) {
hideModal();
}
});
return {
add: add,
getAll: getAll,
addListItem: addListItem,
loadList: loadList,
loadDetails: loadDetails,
showDetails: showDetails
};
})();
pokemonRepository.loadList().then(function () {
pokemonRepository.getAll().forEach(function (pokemon) {
pokemonRepository.addListItem(pokemon);
});
});
1 - 您的代码中几乎没有错误。要打开 bootstrap 模式,有一种方法:
$('#myModal').modal('show');
2 - 然后您使用 innerHTML 而不是 modal-body 清理了模式的结构,并且您正在尝试动态地重新创建所有元素。
您可以做的只是替换模态主体的内容,或者不要忘记 re-create 模态的每个元素 这不是您所做的。
这是一个工作示例:
嘿,我只是无法调出使用 bootstrap 的模态。从理论上讲,我有一个从另一个网站获取的口袋妖怪列表。然后每个口袋妖怪都应该充当一个按钮,然后我可以点击并接收更多信息。我会很感激一些帮助,因为我很迷路。 谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple JS App</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header class="page-header">
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-target="#myModal" data-toggle="modal" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<h1>Pokedex</h1>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" data-target="#myModal" data-toggle="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<ul class="list-group"></ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</body>
</html>
JS
let pokemonRepository = (function () {
let pokemonList = [];
let apiUrl = 'https://pokeapi.co/api/v2/pokemon/?limit=150';
function add(pokemon) {
pokemonList.push(pokemon);
}
function getAll() {
return pokemonList;
}
function addListItem(pokemon) {
let pokemonList = document.querySelector('.list-group');
let listPokemon = document.createElement('li');
listPokemon.classList.add('group-list-item');
let button = document.createElement('button');
button.innerText = pokemon.name;
button.classList.add('btn');
pokemonList.appendChild(listPokemon);
listPokemon.appendChild(button);
button.addEventListener('click', function(event) {
showDetails(pokemon);
});
}
function loadList() {
return fetch(apiUrl).then(function (response) {
return response.json();
}).then(function (json) {
json.results.forEach(function (item) {
let pokemon = {
name: item.name,
detailsUrl: item.url
};
add(pokemon);
console.log(pokemon);
});
}).catch(function (e) {
console.error(e);
});
}
function loadDetails(item) {
let url = item.detailsUrl;
return fetch(url).then(function (response) {
return response.json();
}).then(function (details) {
// Now we add the details to the item
item.imageUrl = details.sprites.front_default;
item.height = details.height;
item.types = details.types;
}).catch(function (e) {
console.error(e);
});
}
function showDetails(pokemon) {
loadDetails(pokemon).then(function () {
showModal(pokemon);
});
};
function showModal(item) {
let modalContainer = document.querySelector('#myModal');
modalContainer.classList.add('is-visible');
// Clear all existing modal content
modalContainer.innerHTML = '';
modalContainer.addEventListener('click', (e) => {
// Since this is also triggered when clicking INSIDE the modal
// We only want to close if the user clicks directly on the overlay
let target = e.target;
if (target === modalContainer) {
hideModal();
}
});
let modal = document.createElement('div');
modal.classList.add('modal');
// Add the new modal content
let closeButtonElement = document.createElement('button');
closeButtonElement.classList.add('modal-close');
closeButtonElement.innerText = 'Close';
closeButtonElement.addEventListener('click', hideModal);
let titleElement = document.createElement('h1');
titleElement.innerText = item.name + (': ') + ('height = ') + item.height;
let container = document.querySelector('#image-container');
let myImage = document.createElement('img');
myImage.src = item.imageUrl;
modal.appendChild(closeButtonElement);
modal.appendChild(titleElement);
modalContainer.appendChild(modal);
modal.appendChild(myImage);
}
function hideModal() {
let modalContainer = document.querySelector('#myModal');
modalContainer.classList.remove('is-visible');
}
window.addEventListener('keydown', (e) => {
let modalContainer = document.querySelector('#myModal');
if (e.key === 'Escape' && modalContainer.classList.contains('is-visible')) {
hideModal();
}
});
return {
add: add,
getAll: getAll,
addListItem: addListItem,
loadList: loadList,
loadDetails: loadDetails,
showDetails: showDetails
};
})();
pokemonRepository.loadList().then(function () {
pokemonRepository.getAll().forEach(function (pokemon) {
pokemonRepository.addListItem(pokemon);
});
});
1 - 您的代码中几乎没有错误。要打开 bootstrap 模式,有一种方法:
$('#myModal').modal('show');
2 - 然后您使用 innerHTML 而不是 modal-body 清理了模式的结构,并且您正在尝试动态地重新创建所有元素。
您可以做的只是替换模态主体的内容,或者不要忘记 re-create 模态的每个元素 这不是您所做的。
这是一个工作示例: