how do i open modal with javascript. without using jquery

Question

How do I make a modal visible with javascript? I don't want to do it using jquery. i just want it with 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. I made it with modal bootstrap. my codes are below.

html code:

<!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:

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';

score 2 · Answer 1 · answered Dec 31 '21 at 08:30

You just need to declare a new modal object, like:

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.

score 0 · Answer 2 · answered Dec 31 '21 at 07:32

Bootstrap depends on jQuery, and you're already including jQuery in your code.

But if you want to create a modal without Bootstrap and jQuery, you can do so with CSS and JavaScript. Use an event listener to listen for whatever JavaScript event you desire, then show the modal when that event occurs.

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>

Bootstrap 5 doesn't depend on JQuery. OP is using Bootstrap 5. (Yeah JQuery is imported, but just correcting your initial statement) — Siddharth Bhansali, Dec 31 '21 at 08:23

how do i open modal with javascript. without using jquery

2 Answers2