单击时在引导模式中打开 Iframe

2024-01-08

我正在尝试创建一个按钮来打开包含 iframe 的模式。 iframe 仅应在模式打开后加载。现在,当我单击按钮打开模式时,没有加载任何内容,并且控制台中没有给出任何错误。

我正在关注我发现的旧片段here https://www.bootply.com/61676但似乎使用较新版本的 bootstrap,它似乎不起作用。

Jquery

var frameSrc = "http://test.com";

$('#ticketViewBtn').click(function(){
    $('#ticketView').on('show', function () {

        $('iframe').attr("src",frameSrc);
      
    });
    $('#ticketView').modal({show:true})
});

引导程序

<!-- Button trigger modal -->
<button class="btn btn-primary btn-sm" id="#ticketViewBtn" data-toggle="modal" data-target="#ticketView">
    TICKET
</button>
<!-- Modal -->
<div class="modal fade" id="ticketView" tabindex="-1" role="dialog" aria-labelledby="ticketViewLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ticketViewLabel">TICKET</h4>
            </div>
            <div class="modal-body">
                <iframe src="" height="600px" width="800px" frameborder="0"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

使用此代码加载 iframe 。

$('#ticketViewBtn').click(function(){    
    var iframe_id = $("#myiframe");
    iframe.attr("src", iframe.data("src")); 
    $('#ticketView').modal({show:true})
});

<iframe id="myiframe" src="" height="600px" data-src="http://test.com" src="about:blank" width="800px" frameborder="0" onload="resizeIframe(this)" ></iframe>

function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";        
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

单击时在引导模式中打开 Iframe 的相关文章

  • 我需要中小企业帮助自动化 jqGrid 过滤器,请

    好吧 简而言之 我需要做的是在加载 jqGrid 时自动将一组排序标准和数据过滤器应用到 jqGrid 其目的是 用户将从大约 10 个预填充的过滤器开始 然后 如果他们愿意 他们可以更改这些过滤器或他们认为合适的排序 到目前为止 经过大量
  • 有没有办法让div在通过jquerydraggable[或等等]拖动时不互相重叠?

    有没有办法让div在通过jquerydraggable 拖动时不互相重叠 我有一堆 div 用户可以拖动它们 但我不能让它们彼此重叠 基本上 我正在创建一个画布 用户可以在其中自由移动网站内容 但在移动它们时不需要与其他内容重叠 有任何想法
  • jQuery 拖动并跟随鼠标

    我正在尝试创建一个两列的可滑动区域 中间有一个拖动栏 请参阅这个小提琴 http jsfiddle net W7tGj 2 http jsfiddle net W7tGj 2 我试图避免将 jQ UI 添加到其中 因此任何帮助将不胜感激 我
  • jQuery:“$(this).next().next()”有效,但“$(this).next('.div')”无效

    好吧 我正在尝试将这组信息单独隐藏 这有效 arrow click function this next next slideToggle img class arrow src https via placeholder com 40 h
  • 暂停或停止整页而不破坏

    我有一个正常滚动的页面 页面上有一个锚点 它会弹出一个模式 我在其中初始化 fullpage js 到目前为止 效果很好 但是当用户单击关闭图标时 我希望模式窗口关闭 并使 fullpage js 暂停或停止 以便禁用全页滚动效果 除非用户
  • 使用数组或列表在 JSP 中自动完成文本框

    我试图以不同的方式进行自动完成 但根本不起作用 从here https stackoverflow com questions 18612524 jquery autocomplete ui with servlet is not retu
  • 如何使用带有 ID 的单独播放按钮播放多个 HTML5 视频

    我有一个 HTML5 视频列表 其中也有一个播放按钮 每个播放按钮都有一个唯一的标识符 作为类名 然后每个视频都有一个匹配的类名 这样我就可以将特定的按钮分配给特定的视频进行播放 HTML
  • Jquery 获取 .val

    我需要的是 this 值 this attr value 出现在 这个 中 activities btn id val this val 这是代码 thoughts list click function this attr id this
  • 范围滑块 javascript 以小时和分钟为单位

    我试图分别以小时和分钟为单位显示滑块的值 我对 JS 还很陌生 并且仍在尝试了解它是如何工作的 到目前为止 我所拥有的是一个工作滑块 其最大值为 1440 24 小时内的分钟 在 JS 中 我尝试将其划分为小时和分钟 并使用 innerHt
  • 我如何在ajax应用程序中找到未使用的css?

    我一直在搜索 但找不到任何 ff 插件或 javascript 来查找 ajax 应用程序中未使用的 css 除尘选择器 http www sitepoint com dustmeselectors 可以进行网站抓取 但我正在寻找检查加载内
  • Angularjs 使用 ng-init 为 ng-model 赋值

    您好 我有以下问题 看起来很简单并且应该有效 但事实并非如此 在我的代码中我输入了
  • Mousedown 事件与 ipad/iphone 的兼容性? - jQuery 移动

    我用jquery写了一个小卷轴 卷轴似乎在 PC 和 Mac 上都能完美运行 但它不适用于触摸设备 我想这是由于mousedown被调用的属性 如何在 PC 和触摸屏设备上实现此功能 Thanks scroll nav up scroll
  • Bootstrap 多选限制问题

    我使用创建了一个多选下拉列表引导多选 http davidstutz github io bootstrap multiselect 我需要在选项选择中设置一个限制 这里我将其设置为 5 如果达到限制 我只需禁用其他选择选项 它就可以完美工
  • jQuery - 页面上最宽的项目

    如何使用 jQuery 在网页上找到最宽的项目 在 css 中设置的宽度或作为属性 不会很快 但应该可以解决问题 var widest null each function if widest null widest this else i
  • jQuery 分钟和秒倒计时器

    我想创建一个 jquery 倒计时器 我尝试了以下代码 但它不起作用 我该怎么办 DEMO https jsfiddle net tbosn210 https jsfiddle net tbosn210 var interval setIn
  • 如何在从数据库异步加载中用占位符替换不存在的图像

    我有一个包含图像的数据库 我需要根据用户的请求即时加载这些图像 这些图像将作为包含 div 容器中的单独 s 的背景图像 类似于图像滚动条 该数据库当前是本地数据库 但这不是我的问题 问题是数据库可能没有我请求的所有图像 并且我可能会得到一
  • CORS:为什么我的浏览器不发送 OPTIONS 预检请求?

    从我读到的内容来看CORS https en wikipedia org wiki Cross origin resource sharing 我理解它应该按如下方式工作 客户端的脚本尝试获取资源从服务器不同的起源 浏览器拦截这个请求并首先
  • jQuery:array[i].children() 不是函数

    以下代码的灵感来自http ignorethecode net blog 2010 04 20 footnotes http ignorethecode net blog 2010 04 20 footnotes 当您将光标移到脚注符号上时
  • Jquery 脉动改变颜色或图像

    我正在尝试使用 jquery 脉动代码让 div 改变颜色 但我希望它从红色变为黑色 但我听说要做到这一点 你必须下载某个插件 所以我希望它脉动为图片 到目前为止我有这两个代码 img src 36 gif alt width 105 he
  • 如何通过JQuery从不带扩展名的URL中获取页面名称

    我有一个网址 http www example com keyword category php or http www example com keyword category php 4 我需要一个神奇的咒语 它只给我页面名称categ

随机推荐

  • 当未使用 EXISTS 嵌套 case 语句引入子查询时,选择列表中只能指定一个表达式

    我正在尝试创建一个查询来获取事件开放的小时数 下面是我的查询 我使用 case 语句是因为它需要考虑仅计算工作日 这是这个过程中的一个步骤 我的总体目标是实际获得那些天的工作时间 因此 例如 如果天数大于 1 则计算所有这些天并乘以 8 如
  • 如何解析任何日期格式

    我正在尝试做一些聪明的事情 以便解析任何国际格式的日期 在我的前端 我使用 jquery ui 作为日期选择器 每种语言都有其特定的日期格式 Fr 日 月 年 En 月 日 年 好的 但现在在 php 部分我必须使用相同的格式 Mysql
  • 将标题添加到列表框的滚动查看器并保留 virtualizingStackPanel (wp7)

    我想向列表框添加标题 我通过使用模板来完成此操作 问题是 如果我扩展列表框的模板 列表框的 virtualizingstackpanel 似乎不再按预期工作 它会在我滚动之前加载所有内容 我在 stackoverflow 中发现了一些相关问
  • 从 UIMenuController 获取选定的文本

    我试图在使用 UIMenuController 执行操作时获取选定的文本 如何取出选定的文本 我目前正在使用 UIWebView 但希望有一个通用的解决方案 如果有 您应该能够从以下位置获取数据UIPasteboard 应该是这样的 UIP
  • Android:LinearLayout - 未指定垂直或水平

    我正在学习一个教程 我注意到有一个线性布局没有指定垂直或水平 在另一个教程中我被告知这基本上是必需的 两者都没有意味着什么 是不是很糟糕 这是由另一个线性布局包围的 DID
  • iOS应用程序applicationWillEnterForeground并且卡住了一段时间

    我添加此功能以在应用程序进入前台时发布通知 void applicationWillEnterForeground UIApplication application NSNotificationCenter defaultCenter p
  • Linux命令获取以毫秒为单位的时间

    如何在 Bash shell 脚本中获取以毫秒为单位的时间 date T N 返回当前时间 纳秒 06 46 41 431857000 date T 6N 返回当前时间 纳秒四舍五入到前 6 位数字 即微秒 06 47 07 183172
  • Typescript:如何根据类型进行分支

    我有这样的事情 interface A a1 string a2 number a3 boolean interface B b1 number b2 boolean b3 string function foo
  • 根据第三个值更改 2D 绘图线的颜色

    我有一个看起来像这样的数据集 140400 70 7850 1 140401 70 7923 2 140402 70 7993 3 140403 70 8067 4 140404 70 8139 5 140405 70 8212 3 其中第
  • Android:找不到处理 Intent 错误的 Activity?将如何解决

    找不到处理 Intent 错误的 Activity 将如何解决 Preference customPref Preference findPreference DataEntryScreen customPref setOnPreferen
  • 使用fabric.js,增加按钮单击时画布文本的字体大小

    我正在使用 Fabric js 在画布上工作 我已经在画布上创建了文本 现在 单击按钮我想增加字体大小 canvas set fontSize 40 这不起作用 任何其他方法 我已经创建了小提琴请Check http jsfiddle ne
  • 解析 ANSI 转义码?

    我正在用 C 构建一个 telnet 应用程序 用于在老式 BBS 系统上编写门游戏脚本 例如 Wildcat 但似乎无法为 ANSI 转义码 例如光标移动 着色等 构建一个可用的解析器 几乎所有系统我 已经测试过发送不符合任何 标准 的未
  • 是否有一种合理的方式来考虑列表索引?

    理解两者之间差异的基本逻辑或哲学基础是什么 mylist 2 and mylist 2 在下面的 理解单方括号与双方括号的简单逻辑方法是什么 gt mylist lt list 1 list a b c gt mylist 2 1 1 1
  • 从 javascript 加载另一个 html 页面

    是否可以从 html 页面加载 Javascript 程序 然后让 Javascript 加载另一个 html 页面而不是加载程序的页面 是的 在 JavaScript 代码中 window location href http new w
  • 将 std::variant 转换为具有类型超集的另一个 std::variant

    我有一个std variant我想转换为另一个std variant它有一个其类型的超集 有没有一种方法可以让我简单地将一个分配给另一个 template
  • 在 C# 中以编程方式隐藏目录

    我想在 Windows Vista 中隐藏一个目录 只是从视图中没有完全隐藏 就像您从文件夹选项中设置的那样 我尝试了一些与我看到的例子类似的东西 只是我稍微修改了一下 这是我的所有代码的组合 using System using Syst
  • Apache FileUtils.copyDirectory(...) 的进度条

    有谁知道 Apache 进度条的实现方法FileUtils copyDirectory File src File dst 我没有看到任何有帮助的JavaDocs http commons apache org io api release
  • 使用graphics.h时未定义引用?

    我正在尝试在 dev C 5 7 1 中使用graphics h 我已经在互联网上搜索了可用的选项 我在包含文件夹中下载了graphics h库 并在参数选项中选择了以下内容 lbgi lgdi32 lcomdlg32 luuid lole
  • 使用 str[i]-'0' (其中 str 是字符串)的目的是什么?

    我正在寻求解决我自己解决的问题 我遇到的许多解决方案都使用 str i 0 的这种表示法来对存储有数字的字符串 str 执行计算 下面的代码比较两个这样的字符串 以计算两个字符串中具有相同索引位置的数字 并为两个字符串中出现但不具有相同索引
  • 单击时在引导模式中打开 Iframe

    我正在尝试创建一个按钮来打开包含 iframe 的模式 iframe 仅应在模式打开后加载 现在 当我单击按钮打开模式时 没有加载任何内容 并且控制台中没有给出任何错误 我正在关注我发现的旧片段here https www bootply