html - 当用户点击 中的 时显示 Bootstrap-modal 窗口

转载 作者：行者123 更新时间：2023-11-28 01:35:39 24 4

当用户点击 Select 标签中显示的选项之一时(也使用 Bootstrap 设计)，我试图显示一个大的 bootstrap 模式

<select name="choice" class="selectpicker" data-style="btn-primary" style="overflow:visible;">
	<optgroup label="Please make a choice">
	  <option value="1" data-subtext="Lorem ipsum Lorem ipsum" data-toggle="modal" data-target=".bs-example-modal-lg">1st choice</option>
	  <option value="2" data-subtext="Lorem ipsum Lorem ipsum" data-toggle="modal" data-target=".bs-example-modal-lg">2nd choice</option>
	  <option value="3" data-subtext="Lorem ipsum Lorem ipsum" data-toggle="modal" data-target=".bs-example-modal-lg">3rd choice</option>
	</optgroup>
</select>




	  <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
      </div>
	  

虽然它没有显示任何内容。我不能在 Option 标签内这样做，还是我做错了？

谢谢

最佳答案

你必须写一个小脚本。试试这个

$(document).ready(function(){
	$('.modal-content').hide();
	var selectvalue=$('select').val();
	$('select').click(function(){
	  if($('select').val() != selectvalue){
		$('.modal-content').show();
	  }
	  else{
		$('.modal-content').hide();
	  }
	})
});

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

<select name="choice" class="selectpicker" data-style="btn-primary" style="overflow:visible;">
	<optgroup label="Please make a choice">
	  <option value="1" data-subtext="Lorem ipsum Lorem ipsum" data-toggle="modal" data-target=".bs-example-modal-lg">1st choice</option>
	  <option value="2" data-subtext="Lorem ipsum Lorem ipsum" data-toggle="modal" data-target=".bs-example-modal-lg">2nd choice</option>
	  <option value="3" data-subtext="Lorem ipsum Lorem ipsum" data-toggle="modal" data-target=".bs-example-modal-lg">3rd choice</option>
	</optgroup>
</select>




	  <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
      </div>

关于html - 当用户点击 <select> 中的 <option> 时显示 Bootstrap-modal 窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28393838/

24 4 0

文章推荐： javascript - 如何在多个图像上显示 fontawesome 图标？

文章推荐： c++ - PlaySound 不工作

文章推荐： c++ - Googletest expect_call 不记录调用

文章推荐： c++ - 如何以UI形式打开QML？

• angularjs - Angular modal 服务错误 - TypeError : modal. element.modal 不是函数

  我有 Angular 问题 modal service 我的 app.js 包括: angular.module('myApp', ['myApp.test', 'ui.bootstrap','sma

• javascript - 基金会揭示模态 : how can I return to parent modal after closing modal-in-a-modal

  这是模态中模态的示例。 http://foundation.zurb.com/docs/components/reveal.html 关闭子模态后，有什么方法可以返回到相同状态的第一个模态吗？或者，更

• javascript - Bootstrap 3 : prevent modal inside modal to trigger (hidden. bs.modal) 每次

  我在另一个模态中有一个模态，我设法使内部模态关闭而不影响另一个模态。问题是，当第二个模态关闭时，它会为其自身和第一个模态触发 'hidden.bs.modal' 事件。 Open demo moda

• javascript - bootstrap modal $(...).modal 不是一个函数

  我试图在单击跨度时打开 Bootstrap 模式对话框，我在互联网上搜索了问题的解决方案 Bootstrap 模式 $(...).modal 不是函数 但我发现的唯一解决方案是“将 jQuery 脚本

• angular2 错误 : this. $modal.modal 不是函数

  我收到错误:this.$modal.modal 不是一个函数 我通过 gulp 文件从 wwwroot 文件夹中的 Node_Module 获得了 ng2-bs3-modal。 我的文件夹结构是:

• modal-dialog - Drupal-8 Modal 不处理登录错误

  我使用“use-ajax”类在模态中呈现登录表单。我想在不关闭同一模式的情况下处理验证错误。成功登录后，它会正确重定向，但是当发生错误时，它会关闭模式并重定向到登录页面，即用户/登录并在该页面上显示错

• modal-dialog - Modal打开但不显示内容 - ngx-smart-modal

  我使用的是 5.2.9 版的 Angular 5，我使用的是 ngx-smart-modal，当我打开 Modal 时，它不显示内容并且非常接近顶部并缩小，附加的图像已附加。 const reason

• jquery - Modal JS 错误 - 对象不支持属性或方法 'modal'

  我正在尝试显示模式弹出窗口以显示网格中所选记录的详细信息。在模式弹出窗口中设置每个控件的值后，我尝试打开它但失败。我已在网站母版页中包含了所有必需的引用，但不断收到“对象不支持属性或方法‘模态’”错误

• javascript - $modal.modal 不是 FooTable 中的函数

  我正在关注这个Tutorial . 这是我的代码(我已经排除了我的表格 HTML): @model IEnumerable @{ Layout = "~/Views/Shared/_Layou

• jquery - Twitter-Bootstrap Modal on Modal 自定义关闭

  使用 twitter bootstrap 框架进行 Web 应用程序。我正在使用一个模态，其中我调用另一个模态，其中一个模态位于另一个模态之上。目前，如果您单击关闭“x”按钮，它将关闭两个模式窗口。我

• javascript - Modal 中的 Twitter Bootstrap Modal？

  是否可以使用 Twitter Bootstrap 在另一个模态中打开一个模态？ 我创建了一个模态，并在第一个模态体内放置了一个指向第二个模态的链接和第二个模态的定义。当我单击链接时，第二个模式在第一个

• javascript - Angular $modal 范围 - 将对象传递给 $modal

  我正在尝试将 Angular 的 Bootstrap 模式传递给在 Angular Masonry Gallery 中单击的图像的 URL。我所拥有的与文档中的演示非常接近，仅做了一些更改。我知道这完

• php - HTML & CSS - Modal 正在覆盖另一个 Modal

  我需要解决这个问题，我的问题是您看到的第一个模态框必须在白色模态框的后面，我该如何更改它们的位置？ 这是图片 黑色模态应该在后面，白色模态应该在前面我怎样才能做到这一点？请帮忙谢谢。 这是我专门制作的

• css - Bootstrap Modals - Modal id 不同但只有一个正确显示

  我在 Bootstrap 中遇到这些模态问题。我已经为两者设置了不同的 id，但是当按下“更多”按钮时只有第一个出现。第二个按钮没有显示所需的模式。 Something The Team

• java - 故障排除: JDialog which is modal and yet not modal?

  被这个问题难住了，但也许，只是也许，有人以前遇到过这个问题，可以给我指出正确的方向。 我有一个 JDialog 用于显示长时间运行的任务的进度，我已将其明确创建为具有定义的所有者的模式: prog

• java - Modal ConfirmDialog over modal Dialog -> 一切都被阻止

  我有一个使用 PrimeFaces 3.0.1 在模态对话框上显示的模态 ConfirmDialog。如果 ConfirmDialog 被打开，整个页面都会被锁定，包括 ConfirmDialog 本

• javascript - Bootstrap : Open Another Modal in Modal

  因此，我使用这段代码在当前打开的模态窗口中打开另一个模态窗口: Click 发生的情况是，滚动条会重复 500 毫秒。我猜是因为当前模式仍在淡出。然而，它看起来非常不平滑和卡顿。 如果有任何解决此问题

• angular - ng-bootstrap Modal 将附加类传递给 .modal-dialog

  我目前在 Angular 应用程序中使用自定义主题，我需要将一个额外的 css 类附加到“.modal-dialog”容器，它位于 ngb-modal 内部-窗口。 根据文档 (https://ng-

• modal-dialog - ngx-smart-modal - Angular 6

  我关注了这个 StackBlitz example加你 ngx-smart-modal window 。 一切都很顺利，除了组件在页面上打开而不是在灯箱模式弹出窗口中打开。 此示例使用 Angular

• modal-dialog - 如何用 bunit 打开一个 blazored modal？

  我想用 bunit 测试模态是否打开。问题是，模态没有被渲染。如何用 bunit 打开一个 blazored modal？ 在我的测试组件中创建模态: Hi

行者123

个人简介

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

作者热门文章

• html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
• JMeter 在响应断言中使用 span 标签的问题
• html - 在 :hover and :active? 上具有不同效果的 CSS 动画
• html - 相对于居中的 html 内容固定的 CSS 重复背景？

滴滴打车优惠券免费领取

全站热门文章

• Linux_进程理解、状态与优先级（详细版）
• 分享一个大模型在请求api接口上的巧用
• 几行代码带你用TinyEngine低代码引擎开发侧边栏插件
• schedule-执行周期性任务
• ShadcnUI：现代前端的灵活组件库
• Java当中使用“google.zxing”开源项目和“github的qrcode-plugin”开源项目生成二维码
• 一文搞懂SaaS应用架构：应用服务、应用结构、应用交互设计
• 云原生周刊：CNCF宣布KubeEdge毕业
• 算法比赛中常用的快读
• 一文彻底弄清Redis的布隆过滤器

Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com