个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我正在尝试在用户点击“类别”下的“添加”按钮时添加一个模式。当我只使用 js fiddle 中模态的代码时，它可以工作，但是当我添加当前文件中的所有代码时，它不会。尝试移动 jquery cdn 并为模态制作一个单独的 div 容器，但无法获得它。感谢您的帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"
integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
crossorigin="anonymous"
></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
rel="stylesheet"
/>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<!-- Navbar -->
<?php include_once("./templates/header.php"); ?>
<br /><br />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mx-auto">
<img
src="./images/user.png"
style="width: 60%"
class="card-img-top mx-auto"
alt="Card image cap"
/>
<div class="card-body">
<h4 class="card-title">Profile Info</h4>
<p class="card-text">
<i class="fa fa-user"> </i>Brian Liang
</p>
<p class="card-text"><i class="fa fa-user"> </i>Admin</p>
<p class="card-text">Last Login : xxxx-xx-xx</p>
<a href="#" class="btn btn-primary"
><i class="fa fa-edit"> </i>Edit Profile</a
>
</div>
</div>
</div>
<div class="col-md-8">
<div class="jumbotron" style="width: 100%; height: 100%">
<h1>Welcome Admin,</h1>
<div class="row">
<div class="col-sm-6">
<iframe
src="http://free.timeanddate.com/clock/i7l8nwj9/n199/szw160/szh160/hoca32/hbw10/hfcc00/cf100/hnca32/fas30/facfff/fdi86/mqcfff/mqs2/mql3/mqw4/mqd70/mhcfff/mhs2/mhl3/mhw4/mhd70/mmcfff/mml4/mmw4/mmd98/hhcfff/hhs2/hmcfff/hms2/hscfff"
frameborder="0"
width="160"
height="160"
></iframe>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">New Orders</h4>
<p class="card-text">
Here you can make new invoices and create new orders.
</p>
<a href="#" class="btn btn-primary">New Orders</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Categories</h4>
<p class="card-text">
Here you can manage your categories and can add parent and sub
categories
</p>
<a
href="#"
data-toggle="modal"
data-target="#exampleModal"
class="btn btn-primary"
>Add</a
>
<a href="#" class="btn btn-primary">Manage</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Brands</h4>
<p class="card-text">
Here you can manage your brand and can add a new brand
</p>
<a href="#" class="btn btn-primary">Add</a>
<a href="#" class="btn btn-primary">Manage</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Products</h4>
<p class="card-text">
Here you can manage your products and can add new products
</p>
<a href="#" class="btn btn-primary">Add</a>
<a href="#" class="btn btn-primary">Manage</a>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="row">
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
您使用的代码仅适用于 Bootstrap 4，但在 header 中，您包含的 Bootstrap 5 已更改一些关于 modals< 的参数 :
触发模态:
// OLD WAY
data-toggle="modal"
data-target="#exampleModal"
// NEW WAY
data-bs-toggle="modal"
data-bs-target="#exampleModal"
声明模态:
<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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"
integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
crossorigin="anonymous"
></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
rel="stylesheet"
/>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<!-- Navbar -->
<?php include_once("./templates/header.php"); ?>
<br /><br />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mx-auto">
<img
src="./images/user.png"
style="width: 60%"
class="card-img-top mx-auto"
alt="Card image cap"
/>
<div class="card-body">
<h4 class="card-title">Profile Info</h4>
<p class="card-text">
<i class="fa fa-user"> </i>Brian Liang
</p>
<p class="card-text"><i class="fa fa-user"> </i>Admin</p>
<p class="card-text">Last Login : xxxx-xx-xx</p>
<a href="#" class="btn btn-primary"
><i class="fa fa-edit"> </i>Edit Profile</a
>
</div>
</div>
</div>
<div class="col-md-8">
<div class="jumbotron" style="width: 100%; height: 100%">
<h1>Welcome Admin,</h1>
<div class="row">
<div class="col-sm-6">
<iframe
src="http://free.timeanddate.com/clock/i7l8nwj9/n199/szw160/szh160/hoca32/hbw10/hfcc00/cf100/hnca32/fas30/facfff/fdi86/mqcfff/mqs2/mql3/mqw4/mqd70/mhcfff/mhs2/mhl3/mhw4/mhd70/mmcfff/mml4/mmw4/mmd98/hhcfff/hhs2/hmcfff/hms2/hscfff"
frameborder="0"
width="160"
height="160"
></iframe>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">New Orders</h4>
<p class="card-text">
Here you can make new invoices and create new orders.
</p>
<a href="#" class="btn btn-primary">New Orders</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Categories</h4>
<p class="card-text">
Here you can manage your categories and can add parent and sub
categories
</p>
<a
href="#"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>Add</a
>
<a href="#" class="btn btn-primary">Manage</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Brands</h4>
<p class="card-text">
Here you can manage your brand and can add a new brand
</p>
<a href="#" class="btn btn-primary">Add</a>
<a href="#" class="btn btn-primary">Manage</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Products</h4>
<p class="card-text">
Here you can manage your products and can add new products
</p>
<a href="#" class="btn btn-primary">Add</a>
<a href="#" class="btn btn-primary">Manage</a>
</div>
</div>
</div>
</div>
<!-- Modal -->
<!-- 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>
</div>
</body>
</html>关于html - 单击按钮时 Bootstrap Modal 不弹出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65406733/
28
4
0
我有 Angular 问题 modal service 我的 app.js 包括: angular.module('myApp', ['myApp.test', 'ui.bootstrap','sma
这是模态中模态的示例。 http://foundation.zurb.com/docs/components/reveal.html 关闭子模态后，有什么方法可以返回到相同状态的第一个模态吗？或者，更
我在另一个模态中有一个模态，我设法使内部模态关闭而不影响另一个模态。问题是，当第二个模态关闭时，它会为其自身和第一个模态触发 'hidden.bs.modal' 事件。 Open demo moda
我试图在单击跨度时打开 Bootstrap 模式对话框，我在互联网上搜索了问题的解决方案 Bootstrap 模式 $(...).modal 不是函数 但我发现的唯一解决方案是“将 jQuery 脚本
我收到错误:this.$modal.modal 不是一个函数 我通过 gulp 文件从 wwwroot 文件夹中的 Node_Module 获得了 ng2-bs3-modal。 我的文件夹结构是:
我使用“use-ajax”类在模态中呈现登录表单。我想在不关闭同一模式的情况下处理验证错误。成功登录后，它会正确重定向，但是当发生错误时，它会关闭模式并重定向到登录页面，即用户/登录并在该页面上显示错
我使用的是 5.2.9 版的 Angular 5，我使用的是 ngx-smart-modal，当我打开 Modal 时，它不显示内容并且非常接近顶部并缩小，附加的图像已附加。 const reason
我正在尝试显示模式弹出窗口以显示网格中所选记录的详细信息。在模式弹出窗口中设置每个控件的值后，我尝试打开它但失败。我已在网站母版页中包含了所有必需的引用，但不断收到“对象不支持属性或方法‘模态’”错误
我正在关注这个Tutorial . 这是我的代码(我已经排除了我的表格 HTML): @model IEnumerable @{ Layout = "~/Views/Shared/_Layou
使用 twitter bootstrap 框架进行 Web 应用程序。我正在使用一个模态，其中我调用另一个模态，其中一个模态位于另一个模态之上。目前，如果您单击关闭“x”按钮，它将关闭两个模式窗口。我
是否可以使用 Twitter Bootstrap 在另一个模态中打开一个模态？ 我创建了一个模态，并在第一个模态体内放置了一个指向第二个模态的链接和第二个模态的定义。当我单击链接时，第二个模式在第一个
我正在尝试将 Angular 的 Bootstrap 模式传递给在 Angular Masonry Gallery 中单击的图像的 URL。我所拥有的与文档中的演示非常接近，仅做了一些更改。我知道这完
我需要解决这个问题，我的问题是您看到的第一个模态框必须在白色模态框的后面，我该如何更改它们的位置？ 这是图片 黑色模态应该在后面，白色模态应该在前面我怎样才能做到这一点？请帮忙谢谢。 这是我专门制作的
我在 Bootstrap 中遇到这些模态问题。我已经为两者设置了不同的 id，但是当按下“更多”按钮时只有第一个出现。第二个按钮没有显示所需的模式。 Something The Team
被这个问题难住了，但也许，只是也许，有人以前遇到过这个问题，可以给我指出正确的方向。 我有一个 JDialog 用于显示长时间运行的任务的进度，我已将其明确创建为具有定义的所有者的模式: prog
我有一个使用 PrimeFaces 3.0.1 在模态对话框上显示的模态 ConfirmDialog。如果 ConfirmDialog 被打开，整个页面都会被锁定，包括 ConfirmDialog 本
因此，我使用这段代码在当前打开的模态窗口中打开另一个模态窗口: Click 发生的情况是，滚动条会重复 500 毫秒。我猜是因为当前模式仍在淡出。然而，它看起来非常不平滑和卡顿。 如果有任何解决此问题
我目前在 Angular 应用程序中使用自定义主题，我需要将一个额外的 css 类附加到“.modal-dialog”容器，它位于 ngb-modal 内部-窗口。 根据文档 (https://ng-
我关注了这个 StackBlitz example加你 ngx-smart-modal window 。 一切都很顺利，除了组件在页面上打开而不是在灯箱模式弹出窗口中打开。 此示例使用 Angular
我想用 bunit 测试模态是否打开。问题是，模态没有被渲染。如何用 bunit 打开一个 blazored modal？ 在我的测试组件中创建模态: Hi
我是一名优秀的程序员,十分优秀！