一,点击即打开
1,点击按钮
<a href="javascript:void(0)" class="btn btn-primary" data-toggle="modal" data-target="#test" onclick="toApiTestPage()">API测试工具</a>

2,模态框

<div class="modal fade" id="test" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="width:1000px;">
<div class="modal-content bgwhite">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="fa fa-times-circle" aria-hidden="true"></i>
</button>
<h4 class="modal-title" id="myModalLabel2">API测试</h4>
</div>
<div class="modal-body requestDiv" style="height: 450px;overflow-y: auto">
<ul class="ul-tab">
<li>
<strong>接口地址</strong>
<span id="apiUrl"></span>
<input id="requestApiUrl" type="hidden"/>
</li>
</ul>
</div>
<div class="modal-footer center">
<a href="javascript:void(0)" class="btn btn-primary" data-dismiss="modal">完成调试</a>
<a href="javascript:void(0)" class="btn btn-default" data-dismiss="modal">取消</a>
</div>
</div>
</div>
</div>

点击1中的"API测试工具"即可打开弹窗

二,点击的先调用js方法判断是否要打开

1,点击按钮:相比一.1 去掉了[data-toggle="modal" data-target="#test"]

<a href="javascript:void(0)" class="btn btn-primary" onclick="toApiTestPage()">API测试工具</a>

2,弹窗不变

3,在方法toApiTestPage()中

function toApiTestPage(){
if (满足条件){
//此时打开弹窗
$("#test").modal("show");
}else {
$("#test").modal("hide");
}
}

bootstrap中的data-toggle模态框相关的更多相关文章

  1. Bootstrap中关闭第二个模态框时出现的问题和解决办法

    Bootstrap中关闭第二个模态框时出现的问题和解决办法 1.关闭第二个模态框时,第一个模态框跟着消失. 解决办法: 第二个模态框的代码不要写在第一个模态框里面,确保两个模态框相对独立; 2.关闭第 ...

  2. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  3. bootstrap表格添加按钮、模态框实现

    bootstrap表格添加按钮.模态框实现 原创 2017年07月20日 17:35:48 标签: bootstrap 1723 bootstrap表格添加按钮.模态框实现 - 需求: 需要表格后面每 ...

  4. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  5. bootstrap下使用模态框,在模态框内输入框中回车时,模态框自动关闭的问题及解决方法

    使用bootstrap下模态框,构建表单提交页面,但是输入框中直接回车,本来是想执行一下验证,但是却导致模态框自动关闭了. 遇到这样的问题,只需要先禁止回车触发表单提交            $(do ...

  6. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  7. 基于jquery-ui及bootstrap的可拖拽模态框

    可直接使用代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  8. 第二百四十三节,Bootstrap模态框插件

    Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框 ...

  9. bootstrap模态框Esc键不关闭

    项目开发时很多时候会需要用到弹出框,而且很多框架都有自己的弹出框,比较现在很流行的bootstrap就有模态框(model). 很多时候这东西用起来非常方便,可以为开发省去很多自己定义的时间!最近项目 ...

随机推荐

  1. Spring源码分析(二十五)finishRefresh

    摘要: 本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 在 Spring 中还提供了 Lifecycle 接口, Lifecy ...

  2. jq的innerWidth()遇到的坑

    innerWidth()在元素隐藏的时候是取不到值的,但是取到的是元素的内部尺寸,包括padding和content值,,如果元素隐藏了之后他的content就为空,值为0,所以只有等到元素显示之后再 ...

  3. C. String Transformation

    http://codeforces.com/problemset/problem/946/C You are given a string s consisting of |s| small engl ...

  4. QoS policy-map class-map

    QoS(Quality of ServiceQoS(Quality of Service,服务质量)指一个网络能够利用各种基础技术,为指定的网络通信提供更好的服务能力, 是网络的一种安全机制, 是用来 ...

  5. 【git2】git+码云+webStrom

    在[git1]中介绍了Git的安装.webstrom配置Git和GitHub.GitHub项目上传下载的方法. 这篇将一下在[git1]步骤(一)基础上webstorm配置码云 实现项目的上传下载. ...

  6. KVM的初始化过程

    之前打算整理一下在Guest VM, KVM, QEMU中IO处理的整个流程,通过查阅资料和阅读源码,已经大致知道IO在Guest KVM中的处理流程.当想要整理IO在KVM和QEMU中的处理时,发现 ...

  7. 阿里云CentOS自动备份MySql 8.0并上传至七牛云

    本文主要介绍一下阿里云CentOS7下如何对MySql 8.0数据库进行自动备份,并使用.NET Core 将备份文件上传至七牛云存储上,并对整个过程所踩的坑加以记录. 环境.工具.准备工作 服务器: ...

  8. jQuery----操作类样式(依托开关灯案例)

    在网页开发中,元素的样式可以在style标签中定义,但是有很多案例需要添加类样式或者删除类样式,可以获取元素调用css()方法改变元素样式,但是这种方法很繁杂,本文利用开关灯案例,小结使用jquery ...

  9. Yii2 的安装及简单使用

    前段时间第一次使用Yii2框架,碰到了一些问题,这里记录一下. Yii2安装:通过composer安装 1.首先要安装composer,我在另外一篇博客中介绍了如何在Windows下安装compose ...

  10. 【转】如何内网搭建NuGet服务器

    原文:http://www.cnblogs.com/zhangweizhong/p/7755332.html NuGet 是.NET程序员熟知的工具,它可以直接安装开源社区中的各个公用组件,可以说是非 ...