V
V
Valeria2022-04-10 20:24:14
ASP.NET
Valeria, 2022-04-10 20:24:14

How to create asp.net mvc modal window?

as they say, if I'm a fool, if the skis don't go. I can’t find adequate information on modal windows, so I found it on bootstrap:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


but when the button is pressed, nothing happens. I mean, I just created a pure check asp mvc project and pasted it into index.
popping around, you need to write something else, but I can’t find what exactly,

and so I just need to remake the view under the modal. but it makes sense to talk about it if I can’t even call a window,

I found an example that is the only one that works for me with this header:
<base href="https://itchief.ru">
        <link href="/examples/libs/bootstrap-5/bootstrap.min.css" rel="stylesheet">
    <script defer src="/examples/libs/bootstrap-5/bootstrap.bundle.min.js"></script>


but this is some kind of crutch pointing to a specific site. if i change it to
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

stop working

Answer the question

In order to leave comments, you need to log in

2 answer(s)
V
Valeria, 2022-04-11
Lyulina @valeryalastor

It turns out that by default the files were 4.0 bs and I tried to work with 5.0. as soon as I downloaded new files to the official site and everything worked with the help of 2 lines:

<link href="~/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script>

P
Planet_93, 2022-04-10
@Planet_93

You probably took an example from here https://getbootstrap.com/docs/4.0/components/modal/
Look at the first paragraph Getting started
Check that you have included not only the bootstrap.min.css style file, but also the js files - jquery-3.2.1 .slim.min.js, bootstrap.min.js.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question