代码-如何在显示模态框的同时触发OnClick

问题描述

如何在显示模态框的同时触发OnClick

用VS 2013 for web 作了一个网页,用于后台计算,然后把结果显示到网页上。由于运行时间较长,希望在点击按钮后显示一个Bootstrap模态框提示用户“当前正在运行,请等待...”,运行结束后,模态框自动消失。

问题是在按钮加入了“data-toggle="modal" data-target="#myModal"”之后只显示模态框,Onclick不能同时触发。

本人刚刚学习网页编程不久,希望得到高手的指导,下面是按钮代码,求解,谢谢

  <asp:Button ID="Button1" type="button" CssClass="btn btn-primary" runat="server" Text="生成统计报表"   OnClick="btSubmit_Click" data-toggle="modal" data-target="#myModal" />

解决方案

web页上一般是做一个div,当ajax请求开始时,显示div遮罩,当ajax成功返回后,隐藏div遮罩

时间: 2024-09-30 16:19:44

代码-如何在显示模态框的同时触发OnClick的相关文章

制作一个在指定区域显示模态框

//添加权限模态框 function addRoleModal() { var $navPanelRight = $(".nav-panel-right") var $roleContent = $(".role-content") $roleContent.removeClass('hidden') $roleContent.css({ top : $navPanelRight.position().top + 200, left : $navPanelRight

Bootstrap模态框禁用空白处点击关闭_javascript技巧

模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.bootstrap的模态框在默认情况下,点击其他空白区域(通常是遮罩层),模态框会被关闭,那么以下方法就是禁止点击其他区域关闭模态框. $('#myModal').modal({backdrop: 'static', keyboard: false}); backdrop:static时,空白处不关闭. keyboard:false时,esc键盘不

利用vue实现模态框组件_javascript技巧

基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 <template> <div class="modal" v-show="show" transition="fade"> <div class="modal-dialog"> <div cla

如何用vue实现模态框组件

基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 <template>      <div class="modal" v-show="show" transition="fade">          <div class="modal-dialog"&g

js-JS模态框无法显示,小白求解

问题描述 JS模态框无法显示,小白求解 代码如下 <!doctype html> <html> <meta charset="utf-8"> <head> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="//cdn.boo

Bootstrap模态框(modal)垂直居中的实例代码_javascript技巧

Bootstrap官网下载:http://v3.bootcss.com/ 今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal). 刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着.最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去. 因为之前对Bootstrap也不是很熟悉,便开始b

Bootstrap 模态框(Modal)插件代码解析_javascript技巧

Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.下面通过代码给大家介绍bootstrap 模态框插件,先给大家展示下效果图: 页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my

使用jQuery将多条数据插入模态框的实现代码

 代码如下: //Bootstrap模态框(局部) <div class="modal fade" id="orderDetail"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> </div>   <div class=&q

jQuery将多条数据插入模态框的示例代码_jquery

//Bootstrap模态框(局部) <div class="modal fade" id="orderDetail"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> </div> <div class="modal