.modal('show') does not works-CodePudding

I am trying to show a modal by calling a JS file function.

<div onclick="UsernameModal.showModal()"  style="font-family: 'irsans-medium'; margin-right: 10px;color: #343CF9">some text</div>

The JS file and the function look as the following.

var UsernameModal = UsernameModal || {};

$(document).ready(function () {
    UsernameModal.showModal = function () {
        console.log("hi");
        $('#usernameModal').modal({
            backdrop: 'static',
            keyboard: false
        });
        $('#usernameModal').modal('show');
    }
  .
  .
  .
}

The log method in the function gets invoked and also the JQuery is working as it goes into the $ sign. And no errors gets shown in the console after executing.

My _Layout.cshtml file is as below.

    .
    .
    .
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/js/bootstrap.js"></script>
    <script src="~/js/common.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"> 
      </script>
    <script src="~/js/login.js"></script>

</head>
<body>
    @RenderBody()
    @RenderSection("scripts", required: false)
</body>
</html>

I do not know why the modal show function does not get executed. And the modal is located as below.

<div  id="usernameModal" tabindex="-1" role="dialog" aria-labelledby="usernameModal" aria-hidden="true">
    <div >
        <div >
            <div >
                @await Html.PartialAsync("../../Views/Password/_UsernameModal", new InputModel())
            </div>
        </div>
    </div>
</div>

CodePudding user response：

First, aria-labelledby="usernameModal" needed to be aria-labelledby="usernameModalLabel".

Second, instead of calling twice modal, once with the show argument , then again with some options setup, you can put them all together.

$('#usernameModal').modal({ 
   backdrop: 'static', 
   keyboard: false, 
   show: true
});

Third, the order of the loaded css and script matters. The bootstrap css should go first, then the jQuery library, then the popper library (if applicable), finally the bootstrap library.

Fourth, you must be sure all DOM have being loaded prior trying to use them. You can use the jquery's ready, such as:

$(function() {
  // Code that will be run after all DOMs in the page are loaded
});

Below is a working example:

$(function() {

  $('#btnShowModal').bind('click', () => {
    console.log("show modal");    
    $('#usernameModal').modal({ 
      backdrop: 'static', 
      keyboard: false, 
      show: true
    });
  });
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

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

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

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

<button id="btnShowModal">Show Modal</button>

<div  id="usernameModal" tabindex="-1" aria-labelledby="usernameModalLabel" aria-hidden="true">
  <div >
    <div >
      <div >        
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div >
        @await Html.PartialAsync("../../Views/Password/_UsernameModal", new InputModel())
      </div>
      <div >
        <button type="button"  data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

I hope this helped you out.

CodePudding user response：

I corrected the order by which the file references where held in my _Layout.cshtml class.

<!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, shrink-to-fit=no" />

    <title>something</title>
    
    <link href="~/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="~/favicon.ico" />
    <link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="~/css/site.css" />
    <link rel="stylesheet" href="~/css/login.css"/>
    <link rel="stylesheet" href="~/css/common.css" />

    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/js/bootstrap.min.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/js/common.js"></script>
    <script src="~/js/login.js"></script>

</head>
<body>
    @RenderBody()
    @RenderSection("scripts", required: false)
</body>
</html>