如何使用 javascript 使模態可見？我不想使用 jquery 來做到這一點。我只想要它與 javascript。我不希望它在我單擊按鈕時打開。我希望它由于 javascript 中的某些操作而被打開。我是用模態引導程式做的。我的代碼如下。
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div tabindex="-1" id="sonucModal">
<div >
<div >
<div >
<h5 >Test Durumu</h5>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div >
<p id="durum"></p>
</div>
<div >
<button type="button" data-bs-dismiss="modal">??k??</button>
<button type="button" >2. A?amaya Ge?</button>
</div>
</div>
</div>
</div>
<div style="height: 100vh;">
<div style="height: 100vh;">
<div style="height: 400px;">
<div style="width: 25rem; margin-top:20vh; ">
<div style="text-align: center;">
<h5 >Soru</h5>
<span id="soru"></span>
<input type="text" id="cevap"/>
<button id="ok">Tamam</button>
</div>
<ul >
<li id="anaCan" >Kalan Can: <span id="can"></span></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
javascript代碼：
var turkceCumleler = [
"Merhaba",
"?yi Sabahlar",
"?yi Günler",
"?yi Ak?amlar",
"?yi Geceler",
"Tekrar G?rü?mek üzere(Yüz yüze)",
"Tekrar G?rü?mek üzere(Tel.)",
"Yak?nda G?rü?ürüz",
"Güle Güle"
];
var almancaCumleler = [
"hallo",
"guten morgen",
"guten tag",
"guten abend",
"gute nacht",
"auf wiedersehen",
"auf wiederh?gen",
"bis bald",
"tschüss"
]
var sayilar = [];
var healt = 3;
const getQuestion = () =>{
document.getElementById('can').textContent=healt;
let rastgele = Math.floor(Math.random()*turkceCumleler.length);
if(sayilar.indexOf(rastgele) === -1){
sayilar.push(rastgele)
document.getElementById('soru').textContent = turkceCumleler[rastgele];
document.getElementById('cevap').value = ""
}else{
getQuestion();
}
if(sayilar.length === turkceCumleler.length){
//here i want modal to open
}
}
const compareQuestionAnswer = () =>{
if(document.getElementById('cevap').value === ''){
alert("bo? ge?ilemez")
}else{
let deger = almancaCumleler.indexOf(document.getElementById('cevap').value.toLowerCase());
if(deger === -1){
healt--;
document.getElementById('can').textContent=healt;
if(healt === 0){
document.getElementById('anaCan').style.color='red';
document.getElementById('ok').disabled = true;
}
}else{
let deger1 = turkceCumleler.indexOf(document.getElementById('soru').textContent);
if(deger === deger1){
getQuestion();
}else{
healt--;
document.getElementById('can').textContent=healt;
if(healt === 0){
document.getElementById('anaCan').style.color='red';
document.getElementById('ok').disabled = true;
}
}
}
}
}
window.onload = getQuestion;
document.getElementById('ok').addEventListener('click',compareQuestionAnswer);
document.getElementById('anaCan').style.color='green';
uj5u.com熱心網友回復：
Bootstrap 依賴于 jQuery，并且您已經在代碼中包含了 jQuery。
但是如果你想在沒有 Bootstrap 和 jQuery 的情況下創建一個模態，你可以使用 CSS 和 JavaScript 來實作。使用事件偵聽器偵聽您想要的任何 JavaScript 事件，然后在該事件發生時顯示模態。
這是一個簡單的例子：
// Show the modal when you hover over the red box
trigger.onmouseover = () => {
modal.style.display = "block";
}
// Hide the modal when you click the close button
document.getElementsByClassName("close")[0].onclick = () => {
modal.style.display = "none";
}
// Hide the modal if you click outside of the modal area
window.onclick = (event) => {
if (event.target == modal) {
modal.style.display = "none";
}
}#trigger {
height: 100px;
width: 100px;
background-color: red;
}
.modal {
display: none; /* Hidden Initially */
position: fixed;
z-index: 1; /* Higher Z-Index To Sit On Top */
left: 0;
top: 0;
width: 100%; /* Full Width */
height: 100%; /* Full Height */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}<div id="modal" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<span class="close">x</span>
<p>Modal content here</p>
</div>
</div>
<div id="trigger">
Move mouse into this box to trigger modal.
</div>uj5u.com熱心網友回復：
您只需要宣告一個新的模態物件，例如：
const sonucModal= document.getElementById('sonucModal');
const modalEl = new bootstrap.Modal(sonucModal);
然后在需要打開它時像這樣呼叫它：
modalEl.show();
這是一個JSFiddle供參考，模態在 2 秒后自動打開。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/399088.html
標籤：javascript 引导模式