how do i open modal with javascript. without using jquery-CodePudding

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

CodePudding user response：

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" >
  <!-- Modal Content -->
  <div >
    <span >x</span>
    <p>Modal content here</p>
  </div>
</div>
<div id="trigger">
  Move mouse into this box to trigger modal.
</div>

CodePudding user response：

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.