使用 jQuery 更改模态内容

2023-12-22

我正在使用 twitter bootstrap 的模式来制作弹出表单。

下面的代码显示了模式形式。

第一情态形式

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-dialog1">

      <!-- Modal content-->
      <div class="modal-container">

        <div class="modal-header" id="header-modal">
          <button type="button" class="close-modal" data-dismiss="modal">&times;</button>
          <h4 class="modal-h2">Modal Header</h4>
        </div>

        <div class="modal-body">

          <div class="row">
            <div class="col-md-12">
                <h2 id="modal-info-header">Student's Information</h2>
            </div>  
          </div>

            <div class="row">
              <div class="col-md-12">
                <form role="form">

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">First Name</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="First Name">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">Last Name</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Last Name">
                      </div>
                    </div>

                  </div>

                  <div class="modal-form">
                      <label for="guidiantName">Address</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Address">
                  </div>

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">Phone Number</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Phone Number">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">State</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="State">
                      </div>
                    </div>

                  </div>

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">Next of Kin</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Next of Kin">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">Class</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Class">
                      </div>
                    </div>

                  </div>

                  <div class="col-md-12 text-right">
                    <button id="cancel-btn-modal">Cancel</button>
                    <button id="continue-btn-modal">Continue</button>
                  </div>

              </form>
              </div>
            </div>

        </div>
      </div>

    </div>
  </div>

第二情态形式

<!-- Modal -->
  <div class="modal fade" id="Add-Student-Modal" role="dialog">
    <div class="modal-dialog modal-dialog1">

      <!-- Modal content-->
      <div class="modal-container">

        <div class="modal-header" id="header-modal">
          <button type="button" class="close-modal" data-dismiss="modal">&times;</button>
          <h4 class="modal-h2">Modal Header</h4>
        </div>

        <div class="modal-body">

          <div class="row">
            <div class="col-md-12">
                <h2 id="modal-info-header">Guidiant's Information</h2>
            </div>  
          </div>

            <div class="row">
              <div class="col-md-12">
                <form role="form">
                  <div class="modal-form">
                      <label for="guidiantName">Guidiance name</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Guidiance name">
                  </div>

                  <div class="modal-form">
                      <label for="guidiantName">Address</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Address">
                  </div>

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">Phone Number</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Phone Number">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">Occupation</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Occupation">
                      </div>
                    </div>

                  </div>

                  <div class="modal-form">
                      <label for="guidiantName">Email Address</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Email Address">
                  </div>

                  <div class="col-md-12 text-right">
                    <button id="preview-btn-modal">Preview</button>
                    <button id="save-btn-modal">Save</button>
                  </div>

              </form>
              </div>
            </div>

        </div>
      </div>

    </div>
  </div>

上述代码生成标题“继续”。下面有两个按钮“取消”和“继续”。我正在尝试使这两个按钮动态化。我在这里要做的是，当单击“取消”时，模式将关闭。单击“继续”时，正文将动态更改为其他模式内容。

我相信这涉及 javascript/jQuery，但我想不出任何方法来解决这个问题。请赐教。多谢！

褪色示例

$("#modal2Button").click(function() {
  $('#modal1').fadeOut();
  setTimeout(function() {
    $('#modal2').fadeIn();
  }, 400)
});


$("#close-button").click(function() {
  setTimeout(function() {
    $('#modal1').fadeIn();
    $('#modal2').fadeOut();
  }, 1000)

});

.hide-me {
  display: none;
}

.show-me {
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Click Me
</button>

<!-- Modal -->
<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 Header</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <!--         Modal 1 Content Here -->
        <div class="show-me" id='modal1' }>
          <h1>THIS IS MODAL 1</h1>
        </div>

        <!--Modal 2 Content Here-->
        <div class='hide-me' id='modal2'>
          <h1>Content for 2nd Modal</h1>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close-button">Close</button>
        <button type="button" class="btn btn-primary" id="modal2Button">
  Continue
</button>
      </div>
    </div>
  </div>
</div>

立即切换示例

$("#modal2Button").click(function() {
  $('#modal2').removeClass('hide-me').addClass('show-me')
  $('#modal1').removeClass('show-me').addClass('hide-me')
});


$("#close-button").click(function() {
  setTimeout(function(){
  $('#modal1').removeClass('hide-me').addClass('show-me')
  $('#modal2').removeClass('show-me').addClass('hide-me')
  },1000)
  
});

.hide-me {
  display: none;
}

.show-me {
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Click Me
</button>

<!-- Modal -->
<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 Header</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <!--         Modal 1 Content Here -->
        <div class="show-me" id='modal1' }>
          <h1>THIS IS MODAL 1</h1>
        </div>

        <!--Modal 2 Content Here-->
        <div class='hide-me' id='modal2'>
          <h1>Content for 2nd Modal</h1>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close-button">Close</button>
        <button type="button" class="btn btn-primary" id="modal2Button">
  Continue
</button>
      </div>
    </div>
  </div>
</div>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

bootstrapmodal

使用 jQuery 更改模态内容的相关文章

Javascript 作为对象键的函数与块中标记函数之间的语法冲突

假设您有一个支持两者的浏览器带标签的函数声明 https developer mozilla org en US docs Web JavaScript Reference Statements label Labeled function
使用 jQuery inputmask 插件范围 0-100

如何创建 0 到 100 范围内的掩码 document ready function masked inputmask 您可以使用jquery inputmask regex extensions js为了那个原因你可以找到带有所有扩展
如何使用 jQuery 选择第一个块级父级？

考虑以下标记 div h1 span span lorem ipsum span span h1 div 如何找到块级别的 span 3 的第一个父级即具有display block 使用 jQuery 在这种情况下那就是h1 1 3
如何将一个数组中的所有项目复制到另一个数组中？

如何将数组的每个元素其中元素是对象复制到另一个数组中以便它们完全独立我不想更改一个数组中的元素来影响另一个数组这里的关键是数组中的条目是对象并且您不希望对一个数组中的对象的修改显示在另一个数组中这意味着我们不仅需要将对象复
正则表达式中连字符的这种用法有效吗？

NB I only想知道它是否是正则表达式定义中未转义连字符的有效应用它是not关于匹配电子邮件连字符或反斜杠的含义量词或其他任何内容的问题另外请注意链接的答案并没有真正讨论转义未转义连字符之间的有效性问题通常我会像这样声明
使用javascript以编程方式触发iOS safari中的复制菜单？

我正在尝试实现一种用户友好的方式将一些文本从文本输入字段复制到 iOS Safari 上的剪贴板我知道无法在这个平台上以编程方式完成此操作但我希望能够尽可能地指导用户体验在 iOS Safari 上当用户手动突出显示某些文本时会
.points 不透明度/大小在三个.js 内

我回来回答有关 points 的第二个问题这次想知道如何将不透明度从 0 更改为 1 然后又回到距发射器的特定像素距离内 var particleCount 14 particles new THREE Geometry pMateria
取消选择所有复选框后，客户端过滤器显示所有项目

加载时复选框将取消选中并显示所有列表项当选中过滤器时将显示相关的列表项我遇到的问题是当您再次取消选中所有复选框时我需要显示所有项目而不是隐藏这是我的小提琴 http jsfiddle net amesy B9Hnu 124
返回视图作为 JSON 对象的一部分

我有一个应用程序只加载一次完整视图我这样做的原因并不重要重要的是其余内容只会以部分视图的形式返回除了一些内容之外我还有一些 JSON 对象我想通过每个 AJAX 请求在服务器之间来回传递有没有办法返回一个 JSON 对象并将
ES6 模块范围

我有代码 lib js var a a export var b b main js console log a a variable is not available in a global scope import b from lib
为什么 call 比 apply 快那么多？

我想知道是否有人知道why call比apply 在 Chrome 中速度大约快 4 倍在 Firefox 中快 30 倍我什至可以制作自定义原型 apply2 在大多数情况下运行速度是apply 这个想法取自角度 Function
从网页运行 ClickOnce 应用程序，无需用户操作

我们有一个基于 Java 的 Web 应用程序以及用 C 编写的相同应用程序如果 java 检查器发现客户端计算机上没有安装 Java 则应该运行该应用程序这个想法是运行 C 单击一次 http en wikipedia org wik
Google Apps 脚本中 $.ajax() 的服务器端等效项是什么？

我想在 Google App 脚本中从服务器端代码执行 HTTP 请求Authorization标头是否有用于发送 HTTP 请求的 App Script API Google Apps 脚本中的这段代码相当于什么 var api URL
Three.js点击单个粒子

In this example http jsfiddle net agqq96bq 2 您可以看到 2 个可点击的粒子但它们都受到点击的影响另外我只想检测粒子上的点击而不将它们过滤出场景像这儿 if intersects len
触发 jQuery UI 滑块事件

如何触发更改事件jQuery UI 滑块 http docs jquery com UI Slider 我以为会是 slider trigger slidechange 但这没有任何作用完整的示例脚本如下
Vue - 调度完成后调用 store getter？

我正在使用 Laravel 5 7 Vue2 Vuex 我在调度调用完成后让 Vue 返回存储值时遇到一些困难我的申请流程如下我单击一个提交按钮该按钮调用组件上的 validate Validate 分派到我的 addLease 操作
将 html 文本框的值分配给 div 的标题

line 1
如果 POST 响应仅包含 ID，如何将数据保存到我的 Ember 存储？

Ember 数据期望我的服务器在每次成功后返回完整的对象POST 但是我的 API 只返回一种元对象其中包含id 当 Ember 收到此对象时记录中的现有数据将被删除除了id 例如当我这样做时 var asset App Asse
将引导程序弹出框保留在视口内

我正在尝试使用带有按钮的侧边栏创建一个菜单每个按钮都有一个指定的包含相关数据的弹出窗口不幸的是其中一个弹出窗口可能包含任意数量的行并且在某些情况下它可能部分位于视口之外 See http jsfiddle net bfd9f 1 h
JavaScript 阶乘防止无穷大

我一直在 JavaScript 中使用这个函数来计算阶乘数 var f function factorial n if n 0 n 1 return 1 if f n gt 0 return f n return f n factorial

随机推荐

android 使用 Renderscript 实现模糊效果崩溃导致 A/libc：致命信号 7 (SIGBUS)，代码 2，故障地址 0x9e6fa000 in tid 482 (AsyncTask #1)

我使用模糊效果同时应用于从资源加载的位图它按预期工作同时使用通用图像加载器下载图像并应用于位图它会导致 A libc 致命信号 7 SIGBUS 代码 2 tid 31955 中的故障地址 0x9d56e000 AsyncTask
在 Laravel 4 中使用命名空间

我是 Laravel 的新手并且通常使用 PHP 命名空间在我决定制作一个名为 File 的模型之前我没有遇到任何问题我将如何正确地进行命名空间以便我可以使用我的文件模型类这些文件是app controllers FilesCon
反向 mysql_real_escape_string

我有一段很大的数据可能包含引号和双引号我在用着mysql real escape string 安全存放当我把它拿出来查看时所有引号都被转义了我尝试使用str replace去掉所有的引号但这变成了 r n s into rn
如何重用带有参数的 LINQ Select 表达式

我编写了一个 LINQ 查询并为 Select 子句创建了一个表达式来重用它我的查询看起来像这样 DataContext Single Select SearchSelector ToList 其中搜索选择器定义为 private Ex
我们可以在没有 main() 方法的情况下执行 java 程序吗？ [复制]

这个问题在这里已经有答案了据我所知如果没有 main 方法我们就无法执行因为当你运行 java 程序时 java 虚拟机查找 main 方法如果 JVM 找不到 main 方法它将显示运行时错误 Exception in thr
JavaScript 数组是 NaN？ AngularJS ng模型

我想看看 ngModel 的价值是什么 directive myDir function return require ngModel link function scope elm attr ngModel if ngModel retu
@ControllerAdvice 异常处理程序方法未被调用

我正在为 Spring MVC 中的异常处理开发示例演示应用程序我正在尝试Exception Handling With ControllerAdvice 我按照中描述的步骤操作this http www baeldung com 201
.change() 和 .on("change") 之间有区别吗？ [复制]

这个问题在这里已经有答案了之间有什么区别 selector change function and selector on change function 如果有的话在大多数情况下我应该使用哪一个内部没啥区别change函数会使用 o
如何在导出的pdf中显示印地语字体？

我正在尝试显示印地语字体在使用生成的pdf文件中iReport 我在中添加了印地语 ttf 字体iReport对于相同的 iReport工具正在正确显示印地语字体iReport查看器但是当我将其导出到 pdf 文件时我没有在 pdf 文
确定文件是否为空的最佳方法（php）？

我在模板中包含了一个 custom css 文件以允许网站所有者添加自己的 CSS 规则但是当我发送文件时它是空的如果他们没有向其中添加任何规则则加载它是没有意义的确定其是否为空的最佳方法是什么 if 0 filesize f
Android 中的对话框被关闭或取消有什么区别？

正如标题所说 Android 中对话框被关闭或取消有什么区别通常当对话框的工作完成并从屏幕上删除时对话框就会被关闭当用户想要退出对话框并按后退按钮时对话框将被取消例如屏幕上有一个标准的是否对话框如果用户单击否则对话
无法在react router dom中使用Link传递道具

using this to pass props over Watch page but can t get any value 我是新手所以可能会出现愚蠢的错误或信息不足请让我知道任何额外信息如果您正在使用react router
ostrstream 将常量字符串解释为指针

我在清理旧 C C 应用程序的调试宏时遇到了这个问题我们有一个继承自的 Tracer 类ostrstream 我知道自 C 98 以来它已被弃用但这个应用程序是在 1998 年编写的我们这样使用它 Tracer lt lt some
如何从 matplotlib 将时间控制面板添加到 FuncAnimation

我目前正在使用matplotlib animation FuncAnimation http matplotlib org api animation api html matplotlib animation FuncAnimation在
注销后实时数据库onDisconnect不执行

我已经实现了 Firebase 实时数据库存在系统如官方 Firebase 文档中所示我希望确保数据库安全以便登录用户只能写入数据库中自己的存在条目因此在登录时用户写入参考路径 auth authId connections并同
图表不会显示数据点

我正在尝试做一个Chart使用字典中的值但是我的Chart不显示任何内容我的代码运行良好没有错误并且表单上有一个图表我以前从未用 C 制作过图表所以我不知道我在做什么这是我的填充代码如果我删除StatChart update
更改JIT编译的最终值

我注意到一件非常奇怪的事情在通过反射更改最终字段后返回该字段的方法始终给出旧值我想这可能是因为 JIT 编译器这是示例程序 public class Main private static final Main m new Main
无法以编程方式启动 Windows Azure VM

我正在执行 REST API 操作开始角色 http msdn microsoft com en us library jj157189 aspx 在链接中https management core windows net subscrip
RedHat 上的 Scipy 和 Scikit-learn 中未定义的符号

我正在尝试在没有 root 权限的 64 位 Red Hat Enterprise 6 6 服务器上安装 Scikit Learn 我已经全新安装了 Python 2 7 9 Numpy 1 9 2 Scipy 0 15 1 和 Sciki
使用 jQuery 更改模态内容

我正在使用 twitter bootstrap 的模式来制作弹出表单下面的代码显示了模式形式第一情态形式 div class modal fade div class modal dialog modal dialog1 div cla

使用 jQuery 更改模态内容

褪色示例

立即切换示例

使用 jQuery 更改模态内容 的相关文章

随机推荐

热门标签

使用 jQuery 更改模态内容的相关文章