HTML Modal won't open

Question

I wrote a HTML code like this:

index.cshtml:

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/MainLayout.cshtml";
}

<h1>Satışlar Sayfası</h1>

<button type="button" class="btn btn-primary" data-toggle="modal" itemid="openModalButton">
    Satış Yap
</button>
<div class="modal" itemid="Modal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">Satış Yapma Ekranı</h2>
            </div>
            <form>
                <div class="modal-body">
                    <label>Ürün Adı</label>
                    <input type="text" name="Urun" class="form-control" />
                    <br />
                    <label>Ürün Markası</label>
                    <input type="text" name="marka" class="form-control" />
                    <br />
                    <label>Müşteri Adı Soyadı</label>
                    <input type="text" name="musteri" class="form-control" />
                    <br />
                    <label>Müşteri Telefonu</label>
                    <input type="text" name="telefon" class="form-control" />
                    <br />
                    <button class="btn btn-info">Verileri Kaydet</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$(document).ready(function(){
  $("#openModalButton").click(function(){
    $("#Modal1").modal();
  });
});
</script>

When I click the openModalButton button with an id, I want the modal named Modal1 to open, but it does not open. While it works in the training video I watched, it does not work for me.

How can I solve this problem? Thank you for your help.

Answer 1

You are using itemid instead of id

Please replace itemid with id in modal like this

<div class="modal" id="Modall">

and one more important thing use data-href="#Modall" attribute in button, and remove itemid attribute.

You have no need to do a custom javascript. just simply add these CDNs

JQuery <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

Popper JS <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

Latest compiled JavaScript <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>