问题：

如何关闭打开的模态？

吴建中

2023-03-14

我复制了一个模板从coDepen。这段代码非常过时，有一些旧的cdn链接。这意味着我必须找到这些链接的更新版本。我是如此接近使应用程序完全功能，我需要打开后关闭模式。我相信这和自举有关。链接和模态代码如下。

<head>
        <title>Refugee Stories</title>
        <link rel = "stylesheet" href = "index.css">
        <meta name = "viewport" content="width = device-width,initial-scale=1.0">
        <meta charset="utf-8">
    <!-- jQuery Version 1.11.0 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script> 
<!-- <link rel="stylesheet" href="index.css"> -->
<!-- Script -->

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    </head>
...
    <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <!-- Project Details Go Here -->
                            <h2>Refugee Stories</h2>
                            <p class="item-intro text-muted">Html/Css/JavaScript</p>
                            <iframe width="560" height="315" src="https://www.youtube.com/embed/M4yl6ZXC3VY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            <p>Refugee Stories is an application where you can read refugee stories once logged in. As a admin you can review stories  and either approve for the story to make it on the site or decline. As an  user you can submit stories for review. Both roles may view and read stories. </p>
                            <a href="https://refugeestoriesbw.netlify.app/"><button type="button" class="btn btn-primary"><i class="fa fa-times"></i> See Project</button>
                             </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

共有2个答案

尉迟晔

2023-03-14

下面是一个工作示例。正如我在评论中提到的，您已经使用了两次jQuery，并且没有按照每个留档实现模态Stutrue，这就是为什么没有像您预期的那样工作

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
  <div class="row mb-4">
    <div class="col text-center">
      <a href="#" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#portfolioModal5">Click to open Modal</a>
    </div>
  </div>


<!-- large modal -->
<div class="portfolio-modal modal" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">X</button>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <!-- Project Details Go Here -->
                            <h2>Refugee Stories</h2>
                            <p class="item-intro text-muted">Html/Css/JavaScript</p>
                            <iframe width="560" height="315" src="https://www.youtube.com/embed/M4yl6ZXC3VY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            <p>Refugee Stories is an application where you can read refugee stories once logged in. As a admin you can review stories  and either approve for the story to make it on the site or decline. As an  user you can submit stories for review. Both roles may view and read stories. </p>
                            <a href="https://refugeestoriesbw.netlify.app/"><button type="button" class="btn btn-primary"><i class="fa fa-times"></i> See Project</button>
                             </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

郝冥夜

2023-03-14

更新：正如@Atul在他的回答中所说的，您删除了重复的jqueryinclude，然后下面的代码应该可以完美地工作。

$('#portfolioModal5').modal('hide');

.模态（'隐藏'）

手动隐藏模态。

从这里从引导文档了解更多信息

类似资料：

如何打开/关闭ReactJS的“开发模式”？

问题内容：从使用ReactJS的prop验证功能开始，正如文档所说，出于性能原因，该功能仅在“开发模式”下有效。 React似乎正在验证我注释的特定组件的属性，但我不记得显式打开“开发模式”。我尝试搜索如何触发/切换开发模式，但是没有任何运气。问题答案：对方的回答假设您使用外部预建的文件从反应，而正确的，是大多数人不会如何去或应该消耗作出反应，一个包。而且，在这一点上，大多数每个Rea
如何在AngularJS中打开/关闭$ log.debug

问题内容：我正在尝试使用$ log.debug（“ Foo”）。如何将其关闭。我在任何地方都找不到样品。我认为它需要在配置中设置，但我似乎也无法使其正常工作。哪里设置开关？问题答案： $ logProvider.debugEnabled（true）仅在AngularJs 1.1.2或更高版本中可用。 https://github.com/angular/angular.js/pull/16
如何以编程方式打开/关闭react-bootstrap模式？

问题内容：我需要像这样打开/关闭模态 $（element）.modal（’show’）怎么做？问题答案：您正在寻找的是自定义模式触发器，该触发器使用并允许您自己管理模式状态。您可以控制是否使用模态来实现与以下示例中所要求的效果相同的效果。以下代码来自react-bootstrap网站（http://react- bootstrap.github.io/components.html#mod
Android 打开关闭DrawerLayout

本文向大家介绍Android 打开关闭DrawerLayout，包括了Android 打开关闭DrawerLayout的使用技巧和注意事项，需要的朋友参考一下示例
打开与关闭 M600

打开 M600 长按侧边电源按钮直至屏幕上出现 Polar 标志。关闭 M600 导航至 Settings（设定）应用程式，滚动菜单找到并轻触 System（系统）。轻触关机。通过轻触核取标记图标确认关闭电源。
如何打印QTableView [关闭]

问题内容：在这里很难说出要问什么。这个问题是模棱两可，含糊，不完整，过于宽泛或夸张的，不能以目前的形式合理地回答。如需帮助澄清此问题以便可以重新打开，请访问帮助中心。 8年前关闭。我有一个连接到mysql数据库并在QTableView中显示查询结果的Python和PySide应用程序。我需要打印表视图的内容。这是一些代码：我找不到为此提供示例，并且我对文档的了解不多，因此希望获得一些帮助

如何关闭打开的模态？

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档