html - 如何将模式附加到按钮或图像？我的代码无法正常工作...我看到了按钮，但模式无法打开-6ren

html - 如何将模式附加到按钮或图像？我的代码无法正常工作...我看到了按钮，但模式无法打开

转载作者：太空宇宙更新时间：2023-11-04 10:05:20

我在代码底部添加的模式需要帮助。不确定我是否附错了它们，或者模态代码本身是否错误。请帮忙!!!

<!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">
		    <title>Jane Doette</title>
		    <script type="text/javascript" href="jquery-3.0.0.js"></script>
		    <script type="text/javascript" href="bootstrap.min.js"></script>
		    <link rel="stylesheet" type="text/css" href="bootstrap.css">
		    <link rel="stylesheet" type="text/css" href="JaneDoette.css">
		    <link href='https://fonts.googleapis.com/css?family=Lato:300'  
             rel='stylesheet' type='text/css'>
	    </head>
	    <body>
		    <div class="container">
			    <div class="row">
				    <div class="col-md-6">
					    <img class="title-logo"   
    src="file:///Users/Diana/Documents/fvlogo.gif" class="img-responsive" 
    alt="responsive image">
				    </div>
				    <div class="col-md-6 text-right text-uppercase">
					    <h1 class="title-super text-thin">Jane Doette</h1>
					    <h3>Front-end Ninja</h3>
				    </div>
		   	    </div>
			    <div class="row">
				    <div class="col-md-12">
					    <img 
    src="file:///Users/Diana/Documents/testhtml1140x350.jpg" class="img-
    responsive" alt="responsive image">
				    </div>
			    </div>
			    <div class="row">
				    <div class="col-md-12">
					    <h2 class="text-muted">Featured Work</h2>
				    </div>
			    </div>
			    <div class="row text-center">
				    <div class="col-md-4">
					    <img src="file:///Users/Diana/Documents/450x300Type.jpg" 
    class="img-responsive" alt="responsive image">
					    <h3>Type</h3>
					    <p>
						    <button type="button" class="btn" data-toggle="modal" 
                             data-target="#project1">Launch Demo Modal</button>
					    </p>
				    </div>
				    <div class="col-md-4">
					    <img 
                        src="file:///Users/Diana/Documents/450x300wallpaper.jpg" 
                        class="img-responsive" class="img-responsive" 
                        alt="responsive image">
					    <h3>Wallpaper</h3>
					    <p>
						    <button type="button" class="btn" data-toggle="modal"
                 data-target="#project1">Launch Demo Modal</button>
					    </p>
				    </div>
				    <div class="col-md-4">
					    <img src="file:///Users/Diana/Documents/450x300print.jpg" 
                        class="img-responsive" class="img-responsive" 
                        alt="responsive image">
					    <h3>Print</h3>
					    <p>
						    <a href="http://github.com">Link to project</a>
					    </p>
				    </div>
			    </div>
		    </div>

		<!-- Button trigger modal -->
		<button class="btn btn-primary btn-lg" data-toggle="modal" data-  
        target="#project1">
		</button>

		<!-- Modal1 -->
    	<div class="modal fade" id="project1" tabindex="-1" role="dialog" aria-
        labelledby="myModalLabel" aria-hidden="true">
        	<div class="modal-dialog">
            	<div class="modal-content">
                	<div class="modal-header">
                		<button type="button" class="close" data-dismiss="modal">
                         <span aria-hidden="true"></span><span class="sr-
                         only">Close</span></button>
                    	<h4 class="modal-title" id="myModalLabel">Type</h4>
               		</div>
                	<div class="modal-body">
                    	<img src="file:///Users/Diana/Documents/450x300Type.jpg"
                         class="img-responsive" alt="responsive image">
                    	<p> This was my first project in this class. I learned a 
                         lot about HTML and CSS. The portfolio page looks nice, 
                         but there really isn't that much info about your 
                         projects. but putting a lot of text under the image 
                         wouldn't look nice. So adding a modal would be the best 
                         way to do this. </p>
                	</div>
                	<div class="modal-footer">
                    	<button type="button" class="btn btn-default" data-
                         dismiss="modal">Close</button>
                    	<button type="button" class="btn btn-primary">Save Changes
                        </button>
                	</div>
            	</div>
        	</div>
    	</div>

    	<!--Modal2-->
    	<div class="modal fade" id="project1" tabindex="-1" role="dialog" aria-
         labelledby="myModalLabel" aria-hidden="true">
        	<div class="modal-dialog">
            	<div class="modal-content">
                	<div class="modal-header">
                		<button type="button" class="close" data-dismiss="modal">
                         <span aria-hidden="true"></span><span class="sr-
                         only">Close</span></button>
                    	<h4 class="modal-title" id="myModalLabel">Type</h4>
               		</div>
                	<div class="modal-body">
                    	<img 
                         src="file:///Users/Diana/Documents/450x300Wallpaper.jpg" 
                         class="img-responsive" alt="responsive image">
                    	<p> This was my first project in this class. I learned a 
                         lot about HTML and CSS. The portfolio page looks nice, 
                         but there really isn't that much info about your 
                         projects. but putting a lot of text under the image 
                         wouldn't look nice. So adding a modal would be the best 
                         way to do this. </p>
                	</div>
                	<div class="modal-footer">
                    	<button type="button" class="btn btn-default" data-
                         dismiss="modal">Close</button>
                    	<button type="button" class="btn btn-primary">Save Changes
                        </button>
                	</div>
            	</div>
        	</div>
    	</div>

    	<!--Modal3-->
    	<div class="modal fade" id="project1" tabindex="-1" role="dialog" aria-
        labelledby="myModalLabel" aria-hidden="true">
        	<div class="modal-dialog">
            	<div class="modal-content">
                	<div class="modal-header">
                		<button type="button" class="close" data-dismiss="modal">
                         <span aria-hidden="true"></span><span class="sr-
                         only">Close</span></button>
                    	<h4 class="modal-title" id="myModalLabel">Type</h4>
               		</div>
                	<div class="modal-body">
                    	<img  src="file:///Users/Diana/Documents/450x300Print.jpg"
                        class="img-responsive" alt="responsive image">
                    	<p> This was my first project in this class. I learned a
                         lot about HTML and CSS. The portfolio page looks nice, 
                         but there really isn't that much info about your 
                         projects. but putting a lot of text under the image 
                         wouldn't look nice. So adding a modal would be the best
                         way to do this. </p>
                	</div>
                	<div class="modal-footer">
                    	<button type="button" class="btn btn-default" data-
                         dismiss="modal">Close</button>
                    	<button type="button" class="btn btn-primary">Save Changes
                        </button>
                	</div>
            	</div>
        	</div>
    	</div>
	</body>
</html>

我需要一个按钮或图像附加到模式，我已经尝试过两者，但似乎都不起作用。

最佳答案

很难理解“将按钮附加到模式”的意思，因为我能够在 JSFiddle 中打开模式，但是我在您的标记中发现了一些错误，我相信这些错误可能会对您有所帮助:

您似乎想要在页面上使用三个独立的模态框。但是，这些模式中的每一个都具有相同的 id 属性(它们都是 project1)。 ID 必须是唯一的。
一旦所有 id 属性都是唯一的，将按钮元素上的 data-target 属性更改为它对应的模态的 id。
不确定您是否忘记复制整个内容，但是您的 doctype 声明不完整。

Here's a fixed version

关于html - 如何将模式附加到按钮或图像？我的代码无法正常工作...我看到了按钮，但模式无法打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38045648/

文章推荐： python 3 : select() behaves weird with UNIX FIFO

文章推荐： python - 将新数据列添加到 python 中的 csv 文件

文章推荐： HTML Accordion 第一个无法自动关闭 CSS Bootstrap

按钮
所以我有这个 javascript 片段，它有两个按钮可以进入全屏，一个按钮可以退出全屏。我想做到这一点，如果我不在全屏模式下，按钮会显示转到全屏模式，而当我处于全屏模式时，按钮会显示退出全屏模式..
c# - 隐藏可扩展属性的省略号 (...) 按钮，例如属性网格中字体属性的 "…"按钮
我在自定义控件中添加了一个新属性作为可扩展属性，例如属性网格中的字体属性。在 Windows 窗体应用程序项目中使用我的自定义控件后，我在属性网格中看到一个省略号 (…) 按钮，如字体属性的“…”按钮
c# - 隐藏可扩展属性的省略号 (...) 按钮，例如属性网格中字体属性的 "…"按钮
我在自定义控件中添加了一个新属性作为可扩展属性，例如属性网格中的字体属性。在 Windows 窗体应用程序项目中使用我的自定义控件后，我在属性网格中看到一个省略号 (…) 按钮，如字体属性的“…”按钮
javascript - “给我发推文”按钮 - JavaScript 按钮
我尝试将 Twitter 上的“Tweet Me”按钮 ( http://twitter.com/goodies/tweetbutton ) 添加到我的网站。然而，每当按下按钮时，我都会收到此 Jav
javascript - html - <输入类型=按钮> 和 <按钮>
我试图在我的文本区域中获取一个按钮值，如果我使用则工作正常但如果我使用那么它就不起作用了。你能找出问题所在吗？ HTML 1 2 3 4 JavaScript $(document).read
c# - 如何根据调用方法的调用(按钮)发送者(按钮#)操作变量名称？
我的 C# Winform 面板中有一堆文本框。每行文本框的命名如下: tb1 tbNickName1 comboBox1 tb2 tbNickName2 comboBox2 tb3 tbNickNa
javascript - 隐藏 'Clear' 按钮，直到单击 'Apply' 按钮
我有一个表单，其中过滤器下方有按钮(应用过滤器和清除过滤器)，我试图在单击“应用”按钮时显示“清除”，并在单击“清除”按钮时隐藏“清除”按钮。下面的代码(如果我的表有的话):
javascript - 我有一个 Excel 按钮，我想在数据表中添加 pdf 按钮
excel 按钮正在工作，但是当我添加 pdf 按钮时，它添加仅显示 pdf 按钮 excel 按钮在 pdf 按钮添加后隐藏 $(document).ready(function() { $
html - 将标题分为移动应用程序的 3 列(按钮、标题、按钮)
我想创建一个 div 作为标题并分成 3 列，并按以下顺序在其中放置 2 个按钮和一个标题:Button1(左位) Title(居中) Button2(右位) 这是我为这个 div 编写的代码:
javascript - 即使有一个框未选中，如何禁用“允许”按钮？仅当选中所有复选框时才应启用“允许”按钮？
仅当选中所有框时才应禁用“允许”按钮。我该怎么做？我已经完成了 HTML 部分，如下所示。如何执行其中的逻辑部分？即使未选中一个复选框，也应禁用“允许”按钮
php - 在我的网站中开发“点赞”按钮，而不是添加 Facebook“点赞”按钮
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
java - 在 JSF2 中呈现 HTML5 按钮(按钮、重置和提交)
如您所知，您可以使用 2 种方法在 HTML5 中呈现按钮: 使用 void 元素或如果您需要内容，请使用元素(不是空元素)。在JSF2中，有2种方式生成按钮；与UICommand或 UIOu
jquery - 如果隐藏字段值更改，则应启用“保存”按钮。如果输入相同的值，则应再次禁用“保存”按钮
我尝试根据表单元素的更改禁用/启用保存按钮。但是，当通过弹出按钮选择更改隐藏输入字段值时，保存按钮不受影响。下面是我的代码。我正在尝试序列化旧的表单值并与更改后的表单值进行比较。但我猜隐藏的字段值无
android - 如何使用 ActionDone 按钮(不带 Enter 按钮)实现多行 EditText
我有用于在消息(电子邮件、短信)上输入内容的 EditText。我希望在单击 ActionDone 按钮时立即发布消息。我为此使用以下代码: message.setOnEditorActionList
android - 如何禁用 EditText 软件键盘上的 "Next"按钮(替换为 "Done"按钮)
我的 Android 应用程序中有一堆 EditText，每个都将 InputMethod 设置为 numberSigned。我的目标设备没有硬件键盘，而是使用软件键盘输入数字。 Android 将输
java - 无法以编程方式隐藏弧形菜单中的 fab 按钮。尝试了 upload.hide();无法弄清楚如何隐藏 fab 按钮
我无法以编程方式隐藏弧形菜单中的 fab 按钮。我正在使用https://github.com/saurabharora90/MaterialArcMenu在我的代码中。如何在Java中以编程方式隐藏
java - 有没有办法在 JOptionPane showInputDialog 中只有 OK 按钮(没有 CANCEL 按钮)？
我已经看到这在其他类型的对话框窗口中是可能的，例如“showConfirmDialog”，其中可以指定按钮的数量及其名称；但是使用“showInputDialog”时是否可以实现相同的功能？我似乎无法
java - 如何通过 Selenium 和 Java 单击“停用”按钮，然后单击“激活”按钮
相同的按钮用于激活和停用。第一次，当代码运行按钮单击并成功“停用”时。但第二次，代码无法找到该元素。第一个案例按钮位于第二个“a”标签中，然后停用第一个“a”标签中的按钮。案例1: Edit
JavaScript 按钮
是否可以将按钮的 onclick 操作设置为 JavaScript 变量？这个想法是我们用 JavaScript 控制一个表。每当点击该表的一行时，我们就会更新一个 JavaScript 变量。该 v
android自定义控件(按钮)
我想创建一个按钮，它包含左侧的文本和右侧的复选框(或任何其他组件)。我怎样才能做到这一点？我发现我可以制作自己的 View extends Button，但是如果可以的话我应该如何实现 onDraw

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何将模式附加到按钮或图像？我的代码无法正常工作...我看到了按钮，但模式无法打开