Modal Ayarlama hakkında

Merhabalar bir modal kodum var ve bunu dinamik hale getirmek istiyorum

<div id="myModal" class="modal">
Kodlar
</div>

    // Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];


// When the user clicks on the button, open the modal


$( "#myBtn" ).click(function() {
  $( "#myModal" ).show( "slow", function() {
    // Animation complete.
  });
});
    
// When the user clicks on <span> (x), close the modal

$( ".close" ).click(function() {
  $( "#myModal" ).hide( "slow", function() {
    // Animation complete.
  });
});
    
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

İstediğim şey bunu dinamik hale getirmek suanda yeni bir modal eklemek istesem bu kodları kopyalayıp bir tane daha eklemem gerek. Ancak tam olarak istediğim JS kodları sabit kalacak ama modal kısmındaki ID değeri değişecek ya da nasıl yapabilirseniz öyle olcak. html "ID" değerine ne yazarsam o modali açacak ama tek JS ile

Boş zamanımdı, size özel bir codepen hazırladım.

https://codepen.io/flyingatm/pen/oNpLxEz

Burada sanırım olarak istediğiniz senaryoya özel kodu yazdım diye düşünüyorum.

Kafanızda soru olursa sormaktan çekinmeyin.

İyi günler dilerim.

Çok çok teşekkürler istediğim bişey daha var bu Div'i animasyonlu açtırıp gizlsmek istiyorum bu kodu ona göre düzenlermisin? Üstten aşağı doğru açılsın kısa bir sürede Modal mantığı

Rica ederim, JQuery kullanıyor musunuz? Ona göre animasyon için jquery kullanayım.

edit: JQuery kullandığınızı düşünerek kodu düzenledim, iyi günler dilerim.

Teşekkürler en kısa sürede deneyeceğim

@flyingatm;

Attığın kodlara örnek bir modal eklermisin?

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
                   <div class="mb-0 crumina-sign-form-container selected-forms-login selected-forms-single visible">

<div class="tab-content">
<div class="tab-pane active" id="login-panel-2109" role="tabpanel">
<div class="title h6">Hesabına giriş yap</div>
<form class="content crumina-sign-form-login crumina-sign-form" method="post" action="{$mybb->settings['bburl']}/member.php">
                        <input name="action" type="hidden" value="do_login" />
                        <input name="url" type="hidden" value="" />
                        <input name="quick_login" type="hidden" value="1" />
                        <input name="my_post_key" type="hidden" value="{$mybb->post_code}" />
<ul class="crumina-sign-form-messages"></ul>
<div class="row">
        {$loginform}
</div>
</form>
    <script type="text/javascript">
            $("#quick_login input[name='url']").val($(location).attr('href'));
        </script>
    </div>
</div>
</div>
  </div>

</div>

Bunu ekledim ama açmadı