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"  data-toggle="modal" itemid="openModalButton">
    Satış Yap
</button>
<div  itemid="Modal1">
    <div >
        <div >
            <div >
                <h2 >Satış Yapma Ekranı</h2>
            </div>
            <form>
                <div >
                    <label>Ürün Adı</label>
                    <input type="text" name="Urun"  />
                    <br />
                    <label>Ürün Markası</label>
                    <input type="text" name="marka"  />
                    <br />
                    <label>Müşteri Adı Soyadı</label>
                    <input type="text" name="musteri"  />
                    <br />
                    <label>Müşteri Telefonu</label>
                    <input type="text" name="telefon"  />
                    <br />
                    <button >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.

CodePudding user response：

You are using itemid instead of id

Please replace itemid with id in modal like this

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