如何使用 javascript 打开模态。不使用 jquery

Question

How do I make a modal visible with javascript?如何使用 javascript 使模态可见？ I don't want to do it using jquery.我不想用 jquery 来做。 i just want it with javascript.我只想要 javascript。 And I don't want it to open when I click a button.而且我不希望它在单击按钮时打开。 I want it to be opened as a result of some operations in javascript.我希望由于 javascript 中的某些操作而打开它。 I made it with modal bootstrap.我用模态引导程序做到了。 my codes are below.我的代码如下。

html code: 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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <div class="modal fade" tabindex="-1" id="sonucModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Test Durumu</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <p id="durum"></p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Çıkış</button>
              <button type="button" class="btn btn-primary">2. Aşamaya Geç</button>
            </div>
          </div>
        </div>
      </div>
    <div class="container" style="height: 100vh;">
        <div class="row" style="height: 100vh;">
            <div class="col-md-12 d-flex justify-content-center" style="height: 400px;">
                <div class="card" style="width: 25rem; margin-top:20vh; ">
                    <div class="card-body" style="text-align: center;">
                        <h5 class="card-title text-primary">Soru</h5>
                        <span class="text-black-50 fs-5" id="soru"></span>
                        <input class="w-100 form-control mt-4" type="text" id="cevap"/>
                        <button class="btn btn-outline-primary mt-4 w-100" id="ok">Tamam</button>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li id="anaCan" class="list-group-item fw-bold">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/bootstrap@5.1.3/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 code: 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';

Answer 1

Bootstrap depends on jQuery , and you're already including jQuery in your code. Bootstrap 依赖于 jQuery ，并且您已经在代码中包含了 jQuery 。

But if you want to create a modal without Bootstrap and jQuery, you can do so with CSS and JavaScript.但是如果你想创建一个没有 Bootstrap 和 jQuery 的模态，你可以使用 CSS 和 JavaScript 来实现。 Use an event listener to listen for whatever JavaScript event you desire, then show the modal when that event occurs.使用事件侦听器来侦听您想要的任何 JavaScript 事件，然后在该事件发生时显示模式。

Here is a simple example:这是一个简单的例子：

 // 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>

Answer 2

You just need to declare a new modal object, like:您只需要声明一个新的模态 object，例如：

const sonucModal= document.getElementById('sonucModal');
const modalEl = new bootstrap.Modal(sonucModal);

and then call it like this whenever you need to open it:然后在需要打开它时像这样调用它：

modalEl.show();

Here is a JSFiddle for reference, the modal opens automatically after 2 seconds.这是一个供参考的JSFiddle ，模态框会在 2 秒后自动打开。

如何使用 javascript 打开模态。不使用 jquery

问题描述

2 个解决方案

解决方案1
0 2021-12-31 07:32:49

解决方案2
0 2021-12-31 08:30:09

如何使用 javascript 打开模态。 不使用 jquery

问题描述

2 个解决方案

解决方案1 0 2021-12-31 07:32:49

解决方案2 0 2021-12-31 08:30:09

如何使用 javascript 打开模态。不使用 jquery

解决方案1
0 2021-12-31 07:32:49

解决方案2
0 2021-12-31 08:30:09