Bootstrap 4响应模态ASP.NET MVC 5-如何在不单击按钮的情况下显示
Bootstrap 4是一个流行的前端开发框架，它提供了丰富的组件和样式，可以帮助开发者快速构建响应式网页。ASP.NET MVC 5是一个用于构建Web应用程序的框架，它结合了ASP.NET和MVC（Model-View-Controller）的概念。
要在不单击按钮的情况下显示响应模态，可以通过以下步骤实现：
- 引入Bootstrap 4和jQuery库：在HTML文件中，通过链接或下载方式引入Bootstrap 4和jQuery库的CSS和JS文件。
- 创建模态框的HTML结构：在HTML文件中，使用Bootstrap提供的模态框组件，创建一个隐藏的模态框结构。可以使用
<div>元素来定义模态框的外层容器，设置id属性来唯一标识该模态框。 - 添加触发模态框的元素：在HTML文件中，添加一个触发模态框显示的元素，比如一个按钮或链接。可以使用Bootstrap提供的
data-toggle和data-target属性来指定触发模态框的方式和目标模态框的选择器。 - 编写JavaScript代码：在JavaScript文件中，使用jQuery库的事件绑定方法，监听触发模态框显示的元素的点击事件。当点击事件发生时，通过选择器选中目标模态框元素，并调用Bootstrap提供的
modal('show')方法来显示模态框。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4响应模态ASP.NET MVC 5-如何在不单击按钮的情况下显示</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
<!-- 模态框结构 -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">模态框标题</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>模态框内容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" id="showModalBtn">显示模态框</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
// 监听按钮点击事件
$('#showModalBtn').click(function() {
// 选择目标模态框并显示
$('#myModal').modal('show');
});
});
</script>
</body>
</html>在上述示例代码中，我们通过引入Bootstrap 4和jQuery库的文件，创建了一个隐藏的模态框结构，并添加了一个按钮作为触发模态框显示的元素。在JavaScript代码中，通过监听按钮的点击事件，选择目标模态框并调用modal('show')方法来显示模态框。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
相关·内容
2回答
引导程序的远程模式对话框无法工作
twitter-bootstrap
我在使用来自Twitter引导api的远程模态对话框时遇到了问题。
我正在尝试加载一个带有远程html页面内容的模态对话框。我有两个页面，一个页面包含按钮(mod-emote.html)，另一个页面包含单击按钮时希望显示的内容(mod-target.html)。
modal-remote.html：
<!DOCTYPE html>
<html lang="en">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<lin
浏览 3提问于2012-10-19得票数 10
回答已采纳
1回答
将JavaScript对象数据传递到Bootstrap模式
javascript、jquery、html、loops、modal-dialog
我已经遍历了每个对象，并将每个对象的数据传递给它自己的div，并在每个div中添加了一个按钮，该按钮在单击时打开一个模态窗口，并仅显示该特定对象的数据。
但是，我的问题是，当我测试每个按钮以查看它是否显示数据时，我会看到最后一个对象的数据显示在所有的对象模式窗口中。有什么想法吗？
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Help</title>
<link rel="stylesheet"
href="https://m
浏览 0提问于2018-04-28得票数 1
回答已采纳
1回答
如何从外部关闭非模态覆盖对话框
javascript、jquery、html、css、twitter-bootstrap
我想要能够切换一个覆盖对话框使用按钮外。问题是，当覆盖对话框打开时，它会阻止鼠标访问按钮。我们可以不使用它的数据类来模仿引导模态响应吗？使用CSS、jQuery或javaScript可以绕过这种模态行为吗？以下是代码：
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.nonmodals {
position: fixed;
top
浏览 1提问于2015-11-20得票数 0
回答已采纳
2回答
无法弹出简单的twitter引导模式对话框
javascript、jquery、twitter-bootstrap
我正在尝试通过点击一个按钮来显示一个模态对话框。我在试着用引导。我的按钮没有正确的样式(它应该是蓝色的，但它只是一个链接)，当点击链接时，模态对话框不会出现。当我点击按钮时，屏幕就会变成灰色。模态的示例代码来自引导带网站。我正在从CDN装载所有的资源。这看起来并不难。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
浏览 3提问于2013-09-28得票数 1
回答已采纳
1回答
按顺序显示引导模态对话框
javascript、jquery、twitter-bootstrap
我有一个引导模式对话框，当选择Yes时，返回一个已解决的承诺。在承诺被解决后，应该再次显示模态。显示模态的线被击中，但模态不显示。我做错了什么？
$(function() {
showModalDialog('Confirm1', "Select Yes or No", 'Yes', 'No')
.done(function() {
alert('You selected Yes once!');
showModalDialog('Confirm2',
浏览 2提问于2017-10-21得票数 0
回答已采纳
1回答
Bootstrap4:体放大的模态渲染问题
javascript、html、css、twitter-bootstrap、bootstrap-4
我正在尝试使用Bootstrap html页面，body放大到90%。引导模式显示的是从右边和底部的空格。为了显示这个问题，我把一个基本的html页面的模态在主体90%缩放..。
当你点击打开的模式，你会看到从右和底部的空间为modal..How，我们呈现模态与不额外的空格与身体缩放，90%..Desired输出是模态模糊的背景应该覆盖整个屏幕。模态体应该位于x轴的中心，就好像90%的变焦和100%的变焦一样，只有90%的变焦是小字体。
<!DOCTYPE html>
<html lang="en">
<head>
<title&g
浏览 0提问于2019-05-05得票数 1
回答已采纳
1回答
jQuery :动态更新模态体
jquery、twitter-bootstrap
我的网页上有两个按钮(Modal 1和Modal 2)。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<
浏览 1提问于2018-03-15得票数 0
回答已采纳
2回答
只有单击按钮时Javascript模式才能工作
javascript、html、jquery
我正在使用HTML，并且在我的站点中有一个自定义弹出的javascript模式。我唯一的问题是，如果您单击背景上的和按钮，该模式可以工作。
我希望只有当按钮被点击时，这个模式才能工作。(如果单击模式A或B选项，代码将返回错误，因为其余代码是无关的。)
我尝试过添加模态按钮和主按钮，im相同+添加了data-backdrop="static"，但这不是我想要的。
$(document).on('click','#select',function(){
$('#myModal').modal();
});
$(do
浏览 7提问于2020-09-06得票数 0
回答已采纳
2回答
Bootstrap3，模式与透明覆盖，但也关闭它点击外部的模态。
javascript、css、twitter-bootstrap、twitter-bootstrap-3
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://aj
浏览 0提问于2018-05-26得票数 1
回答已采纳
1回答
我无法理解代码的执行情况。
javascript、jquery、html、twitter-bootstrap
我的代码：
<head>
<!-- All the required scripts and CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><
浏览 3提问于2015-01-13得票数 0
回答已采纳
2回答
使用数据的模态-data=“Modal”数据-target=“#id”不去目的地
javascript、jquery、html、css、twitter-bootstrap
我试图集中输入字段使用模态数据-目标函数上的按钮点击。它是focusin，但是创建了一个名为<div class="modal-backdrop in">的div，并且没有正确地关闭模式。
所以用户不能点击网站上的任何地方。似乎有一个问题，我找不到文件，并希望，这里的人可以提供一些线索。当用户单击模态上的Upload Now按钮时，我想关注这个输入字段。这是
.height500 {
height:500px;
background-color:yellow;
}
<script src="https://ajax.googleapis.
浏览 1提问于2017-06-01得票数 1
回答已采纳
5回答
为什么在没有调用javascript代码的情况下引导模式不显示
html、bootstrap-4
我创建了一个html页面，其中包含了bootstrap的modal代码(从Bootstrap的网站上复制)。我注意到，除非我调用modal('show')，否则modal不会显示。为什么?浏览器不应该解释html并显示modal框吗?下面的代码不显示modal，但是如果您在最后评论script，它将显示< code >D9</ code > >。
<!DOCTYPE html>
<html lang="en">
<head>
<base href="">
&l
浏览 0提问于2018-09-08得票数 1
回答已采纳
3回答
按钮事件在引导模式中不起作用
jquery、bootstrap-modal
我试图抓住按钮点击事件在模式内。但不起作用。
我是不是遗漏了什么？
这里是html文件的头部分。我在用Django。
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial
浏览 5提问于2020-02-22得票数 0
回答已采纳
1回答
jQuery量程滑翔机不在模态箱中加载
jquery、ajax、css、slider、rangeslider
我正试图在一个模态盒中加载。加载所有脚本之后。已成功加载脚本，但未显示Modal框
我想要做的事。
有id的列表。单击每个id ajax调用并从后端(MySql)获取滑块数据。
然后将出现一个带有滑块的模型框。滑块具有从后端(MySql)根据id获取的信息。
列表中有很多id。因此，不可能设置静态滑块。
JS Fiddle
jQuery
$(document).ready(function () {
$("#sliderAjaxButton").on('click', function () {
$.when(
浏览 4提问于2014-06-25得票数 0
2回答
为什么不能用laravel 5.4显示对话框？
php、html、laravel、laravel-5
html：
<input id="btnShowAdd" name="btnShowAdd" type="button" value="Add" onclick="showformadd()">
<div class="modal-content" id="myModal">
hello
</div>
脚本显示一个模态对话框：
<script src="http://ajax.google
浏览 4提问于2017-11-10得票数 0
回答已采纳
3回答
单击单选按钮显示日历和jquery中的一个输入框。
javascript、jquery、html
当用户单击单选按钮时，我试图显示日历和输入框。我已经通过使用下面的代码创建了一个模式弹出，当我单击“发送”按钮时，它将打开一个带有两个单选按钮的模式弹出，当我单击“用提醒按钮关闭”弹出时，它将显示日历以及输入框。
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="vi
浏览 0提问于2018-10-15得票数 0
回答已采纳
1回答
打开引导模态时的事件传递
javascript、jquery、twitter-bootstrap
我在一个div里面有一个引导模态按钮。我想要它，这样当我点击按钮时，模态就会打开，但是它会忽略外部div的任何编程。我可以使用event.stopPropagation()让它正常工作；但是模型不会打开。有人能看到怎么解决这个问题吗？
提前感谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial
浏览 1提问于2018-01-30得票数 0
回答已采纳
4回答
单击外部时清除模型中的文本框
javascript、jquery、html
我已经创建了一个带有模型弹出窗口的模型弹出窗口。我在it.Now中有一个文本框，同时在get消失之外单击，同时我想要清除其中的文本框。 <html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<
浏览 57提问于2016-12-01得票数 2
回答已采纳
3回答
引导模态动作按钮不起作用
jquery、twitter-bootstrap、asp.net-mvc-5、bootstrap-modal
我在MVC 5上使用Bootstrap。我的项目有一个模式，它是公开点击链接，贝娄是我的模态语法，我的问题是我的页脚动作按钮不是working.Under，保存按钮单击事件，我想提醒。
目标链接：
标题
<a href="#" class="btn btn-lg btn-success"
data-toggle="modal"
data-target="#basicModal">Click to open Modal</a>
模态：
<div class="modal fade&#
浏览 4提问于2015-04-27得票数 4
2回答
如何正确地显示Bootstrap的模态盒？
html、twitter-bootstrap、twitter-bootstrap-3、modal-dialog、bootstrap-modal
我使用Bootstrav3.1.1并复制了模态盒测试的精确。我试图正确地显示Bootstrap的模态盒，但由于某些原因，它将在某些时候工作，当我测试它。我点击了一个应该触发模态框的按钮，显示了一个灰色淡出/阴影(模态框打开时的背景)，然后迅速消失。我调试了一下，看到了很多错误，说宣言掉了。
我注意到的另一件事是，URL C://.../test.html没有正确地显示模式框，但是添加C://.../test.html#使box函数正确。现在，这让我想知道，因为我在我的整个html文档中有几个哈希标签，它与这些标签有什么关系吗？也许，这行代码是特别的？
<button class="
浏览 1提问于2014-06-25得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
