使用 bootstrap 和 javascript 创建弹出窗口

Question

这是 cshtml

  <a href="#" data-toggle="modal" data-target="#empmodal">
                                        @Html.DisplayFor(model => model.FullName, new { @id = "empName" })
                                    </a>


<div class="ui tiny modal new-employee-modal" id="empmodal">
    <div class="ui placeholder">
        <div class="header">
            <div class="line"></div>
            <div class="line"></div>
        </div>
        <div class="paragraph">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
        <div class="paragraph">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
        <div class="paragraph">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
        <div class="paragraph">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
    </div>
</div>

这是我的js

$('a').click(function (event) {
            var url = '@Url.Action("Details")' /*+ input_index*/;

            $('.modal.new-employee-modal').modal({
                autofocus: false,
                onHidden: function () {
                    $('.modal.new-employee-modal').empty();
                    $('.modal.new-employee-modal').append(
                        `<div class="ui placeholder">
            <div class="header">
                <div class="line"></div>
                <div class="line"></div>
            </div>
            <div class="paragraph">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
            <div class="paragraph">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
            <div class="paragraph">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
            <div class="paragraph">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
        </div>`)
                }
            })
                .modal('show');
            $.get(url).done(function (a) {
                $(".modal.new-employee-modal").html(a);

            });


        });

这是我在里面的局部视图和弹出窗口

 <div class="modal-title-area">
        <div class="modal-name">
            @{ ViewBag.Title = "employee details";
               
                }
        </div>
        <div class="modal-root-page tag-label red"></div>
    </div>
    <div class="modal-divider"></div>
    <div class="modal-content-area">
        <div class="box-title"></div>
        <div class="two fields">
            <div class="field">
                <div class="label">@EmployeeCardRes.FirstName</div>
                <div class="text">@Model.FirstName</div>
            </div>
            <div class="field">
                <div class="label">@EmployeeCardRes.JobTitle</div>
                <div class="text">@ViewBag.JobTitle</div>
            </div>
        </div>
        <div class="two fields">
            <div class="field">
                <div class="label">@EmployeeCardRes.LastName</div>
                <div class="text">@Model.LastName</div>
            </div>
            <div class="field">
                <div class="label">@EmployeeCardRes.PositionCode</div>
                <div class="text">@ViewBag.Position</div>
            </div>
        </div>
        <div class="two fields">
            <div class="field">
                <div class="label">@EmployeeCardRes.BirthDate</div>
                <div class="text">@Model.BirthDate</div>
            </div>
            <div class="field">
                <div class="label">@EmployeeCardRes.ClassCode</div>
                <div class="text">@ViewBag.Department</div>
            </div>
        </div>
        <div class="two fields">
            <div class="field">
                <div class="label">@EmployeeCardRes.Gender</div>
                <div class="text">@Model.Gender.EnumDisplayNameFor()</div>
            </div>
            <div class="field">
                <div class="label">@EmployeeCardRes.MobilePhoneNo</div>
                <div class="text">@Model.MobilePhoneNo</div>
            </div>
        </div>
        <div class="two fields">
            <div class="field">
                <div class="label">@EmployeeCardRes.CompanyEMail</div>
                <div class="text">@Model.CompanyEMail</div>
            </div>
            <div class="field">
                <div class="label">@EmployeeCardRes.FirstEmploymentDate</div>
                <div class="text">@Html.DisplayFor(model => model.FirstEmploymentDate)</div>
            </div>
        </div>
    </div>

我尝试打开 popup.When 我点击 link，模式应该打开并且它应该获取 model.I 中的数据我不确定我在做什么在我看过的例子中是错误的，它几乎完成了，就像 this.I 需要转到我在 javascript 中给出的 url 并从控制器打开一个局部视图，即我扔的最后一页。对不起我的英语

Answer 1

最好插入完整的 bootstrap 和模态库：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

也许可以使用 <button></button> 而不是链接或定义一个 onclick 事件。

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>popup modal</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    
    <!-- Large modal -->
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">Large modal</button>

    <div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Large Modal</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Add the <code>.modal-lg</code> class on <code>.modal-dialog</code> to create this large modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">OK</button>
                </div>
            </div>
        </div>
    </div>
  
    </div>
</body>
</html>

使用 bootstrap 和 javascript 创建弹出窗口

Create popup with bootstrap and javascript

html

javascript

css

asp.net-mvc