如何在显示模态框的同时触发OnClick
用VS 2013 for web 作了一个网页，用于后台计算，然后把结果显示到网页上。由于运行时间较长，希望在点击按钮后显示一个模态框提示用户“当前正在运行，请等待...”，运行结束后，模态框自动消失。
问题是在按钮加入了“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" /&
写个onclick就可以
--- 共有 1 条评论 ---
谢谢你的回复，刚刚学习网页编程不久，能再具体些吗，多谢你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
index.html
&a data-toggle=&modal& href=&remote.html& data-target=&#modal&>Click me&/a>
&div class=&modal fade& id=&modal& tabindex=&-1& role=&dialog& aria-labelledby=&modal&>
&div class=&modal-dialog& role=&document&>
&div class=&modal-content&>
//remote.html内容会被加载到这里
新建remote.html
放入一下内容：
&div class=&modal-header&>
&button type=&button& class=&close& data-dismiss=&modal& aria-label=&Close&>&span aria-hidden=&true&>&&/span>&/button>
&h4 class=&modal-title& id=&exampleModalLabel&>New message&/h4>
&div class=&modal-body&>
&div class=&form-group&>
&label for=&recipient-name& class=&control-label&>Recipient:&/label>
&input type=&text& class=&form-control& id=&recipient-name&>
&div class=&form-group&>
&label for=&message-text& class=&control-label&>Message:&/label>
&textarea class=&form-control& id=&message-text&>&/textarea>
&div class=&modal-footer&>
&button type=&button& class=&btn btn-default& data-dismiss=&modal&>Close&/button>
&button type=&button& class=&btn btn-primary&>Send message&/button>
理解不能。
要回复问题请先或
浏览: 6570
关注: 3 人亲们该页面内会员们分享的“作品”，版权为才华横溢的原作者们所有滴，不得商业使用！
eModal是一款非常实用的基于Bootstrap的模态窗口对话框插件。该模态窗口对话框插件可以制作警告框，确认框，提示框等，并且可以通过Ajax远程加载内容，还可以嵌入iframe框架等，功能非常齐全。
使用eModal模态窗口对话框需要引入bootstrap相关文件和eModal.min.js文件。
&link href="css/bootstrap.min.css" rel="stylesheet" /&
&script src="js/jquery.min.js"&&/script&
&script src="js/bootstrap.min.js"&&/script&
&script src="js/eModal.min.js"&&/script&
你可以通过Ajax在对话框中加载远程的资源。基本的调用方法如下：
var url = "/views/portview.html";
eModal.ajax(url);
你还可以自定义一个标题。
var url = "/views/portview.html";
eModal.ajax(url, "XHR Title");
另外你还可以在对话框的下方自定义按钮。完整的代码如下：
var options = {
url: "/views/portview.html",
title:'Header title',
size: eModal.size.sm,
subtitle: 'smaller text header',
buttons: [
{text: 'OK', style: 'info',
close: true, click: eventA },
{text: 'KO', style: 'danger', close: true, click: eventB }
eModal.ajax(options);
默认情况下，Ajax模态窗口是没有按钮的。还有加载动画是通过Bootstrap的progress-bar-striped来设置的，你也可以自定义你自己的loading加载动画效果。例如下面是使用Font awesome字体图标来制作loading加载动画。
eModal.setEModalOptions({
loadingHtml: '&span class="fa fa-circle-o-notch fa-spin fa-3x text-primary"&&/span&
&span class="h4"&Loading&/span&',
警告框(alert)
通过eModal.alert()方法可以生成一个基于Bootstrap模态窗口的确认框。
var message = "Hello World!";
eModal.alert(message);
或者自定义标题。
var url = "Hello World!";
var title = "这是一个标题";
eModal.ajax(message, title);
你可以使用任何的DOM元素来作为对话框信息的内容。
var options = {
message: $("#my-element-id"),
title: 'Header title',
size: 'lg',
subtitle: 'smaller text header',
useBin: true
eModal.alert(options);
#my-element-id是信息元素的ID号。useBin如果设置为true，那么在对话框关闭之后，元素会被放置到一个#recycle-bin的容器中，并且所有的事件都会被保存。如果设置为false，那么元素会被删除，就不能在获取到同一个元素。
确认框(confirm)
通过eModal.confirm()方法可以弹出一个确认框。
var message = "Hello World!";
eModal.confirm(message, null)
.then(callback, callbackCancel);
var url = "Hello World!";
var title = "Alert Title";
eModal.confirm(message, title)
.then(callback, callbackCancel);
你可以修改默认的标签：{ label: 'Yes' | 'True'| 'OK' }。
var options = {
message: "The famous question?",
title: 'Header title',
size: eModal.size.xl,
subtitle: 'smaller text header',
label: "True"
// use the positive label as key
eModal.confirm(options)
.then(callback, callbackCancel);
callback是强制性的参数，如果未设置则对话框关闭时会抛出一个异常。Callback回调函数会接收一个布尔值参数。
提示框(Prompt)
通过eModal.prompt()方法可以生成一个消息提示框。
var message = "Hello World!";
eModal.prompt(message, null);
.then(callback, callbackCancel);
var url = "Hello World!";
var title = "Alert Title";
eModal.prompt(message, title, callback);
.then(callback, callbackCancel);
你可以使用标题作为提示的信息。
var options = {
message: "The famous question?",
title: 'Header title',
size: eModal.size.lg,
subtitle: 'smaller text header'
eModal.prompt(options)
.then(callback, callbackCancel);
eModal模态窗口对话框插件有如下一些可用的配置参数：
'Attention'
对话框的标题
string,DOM元素或jQuery对象
对话框的内容
模态对话框的大小，可以是：'sm' | 'lg' | 'xl'
设置loading信息
设置是否回收信息内容
附加到信息内容上的css样式，只有message == string时有效
用于配置模态窗口底部的按钮
eModal模态窗口对话框插件的github地址为：
下载资源：0 次
错误提交：
大小：77.91KB
================关于优设记================
“优设记“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博：同步网站更新内容，订阅jquery资源 @吐槽优设记，欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接：
非特殊说明，本文版权归原作者所有，转载请注明出处
我当前G币余额：0
已下载次数：0
注：购买该插件的用户当日可免费下载 插件作者可永久免费下载
所需G币：20
下载提示：由于文件较小，请直接点击下载，不支持迅雷等下载工具。
不足，你可以通过
你可以直接下载，不消耗G币
&浙ICP备号-1 & Copyright (C) 2013
All Rights Reserved 您是第2717645位访客！Bootstrap模态框调用功能实现方法
作者：myxp
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了Bootstrap模态框调用功能实现方法的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
近在做一个项目时需要在页面中嵌入弹出窗口，用来展示表单信息。其实这种弹出窗口有很多jquery插件都可以实现，我这边前端都是用Bootstrap的，正好Bootstrap有模态框这个功能，这下就可以直接拿它实现了。
实现步骤如下：
在前端页面引入bootstrap相关的css和js文件
&link rel="stylesheet" href="/bootstrap/3.3.2/css/bootstrap.min.css"&
&script type='text/javascript' src='../public/js/jquery-1.8.2.min.js'&&/script&
&script src="/jquery/1.9.0/jquery.js"&&/script&
&script src="/bootstrap/2.3.1/js/bootstrap-transition.js"&&/script&
&script src="/bootstrap/2.3.1/js/bootstrap-modal.js"&&/script&
然后在html中创建一个button用来点击触发弹出窗口，这里是调用f_show函数并传入一个参数向后端发起Ajax请求，Ajax处理请求后返回前端并输出到模态框。
&td&&button type="button" data-toggle="modal" data-target="#myModal" onclick="f_show('&?php echo $row['service_tag'];?&');" &&?php echo $row['service_type'];?&&/button&&/td&
Ajax处理请求
function f_show(tags){
type:"POST",
url:"service_info_ajax.php",
data: {"tags":tags},
dataType:'json',
success: function(data){
if(data.state == '1'){
$("#service_key").val(data.service_key);
$("#service_comments").val(data.service_comments);
$("#service_help").val(data.service_help);
$("#service_target").val(data.service_target);
$("#service_mail").val(data.service_mail);
$("#service_mailpass").val(data.service_mailpass);
$("#service_date").val(data.service_date);
if(data.service_type &= '2'){
document.getElementById("remark1").style.display = "none";
document.getElementById("remark2").style.display = "none";
document.getElementById("notes1").style.display = "";
document.getElementById("notes2").style.display = "";
$("#notes2").text(data.service_notes);
document.getElementById("notes1").style.display = "none";
document.getElementById("notes2").style.display = "none";
document.getElementById("remark1").style.display = "";
document.getElementById("remark2").style.display = "";
$("#remark2").text(data.service_remark);
$('#myModal').modal(options);
后端处理返回
require_once("../db.class.php");
require_once("../common.class.php");
require_once("../mailtmp.class.php");
require_once("../admin.class.php");
$obj_comm = new Comm();
$obj_mail = new mailtemplate();
$obj_admin = new AdminSub();
$tags = trim($_POST['tags']);
#$tags = "dfd86c";
$tag_arr = $obj_admin-&find_service_tag($tags,$db);
if($tag_arr){
$tag_arr['state'] = 1;
echo json_encode($tag_arr);
前端模态框页面展示
&!--模态框开始--&&div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="myModal"&
&div class="modal-dialog" role="document"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal" aria-label="Close"&&span aria-hidden="true"&&&/span&&/button&
&h4 class="modal-title" id="gridSystemModalLabel"&Service&/h4&
&div class="modal-body"&
&div class="container-fluid"&
&div class="uk-form-row"&
&div class="uk-form-controls"&
&label for="form-username" class="uk-form-label" style="display:inline-padding: 0 10vertical-align:margin-left:-7"&研究关键字&/label&
&input class="" id="service_key" value="&?php echo $?&" readonly="readonly" style="margin-left: 5width:400height:30" type="text" name="service_help" placeholder=""&
&div class="uk-form-row"&
&div class="uk-form-controls"& &label for="form-username" class="uk-form-label" style="display:inline-padding: 0 10vertical-align:margin-left:7"&评审意见&/label&
&input class="" id="service_comments" readonly="readonly" style="margin-left: 5width:400height:30" type="text" name="service_help" placeholder=""& &/div&
&div class="uk-form-row"&
&div class="uk-form-controls"&
&label for="form-username" class="uk-form-label" style="display:inline-padding: 0 10vertical-align:margin-left:7"&帮助选刊&/label&
&input class="" id="service_help" readonly="readonly" style="margin-left: 5width:400height:30" type="text" name="service_help" placeholder=""&
&div class="uk-form-row"&
&div class="uk-form-controls"&
&label for="form-username" class="uk-form-label" style="display:inline-padding: 0 10vertical-align:margin-left:7"&投稿服务&/label&
&input class="" id="service_target" readonly="readonly" style="margin-left: 5width:400height:30" type="text" name="service_help" placeholder=""&
&div class="uk-form-row"&
&div class="uk-form-controls"&
&label for="form-username" class="uk-form-label" style="display:inline-padding: 0 10vertical-align:margin-left:7"&投稿邮箱&/label&
&input class="" id="service_mail" readonly="readonly" style="margin-left:5width:400height:30" type="text" name="service_help" placeholder=""&
&div class="uk-form-row"&
&div class="uk-form-controls"&
&label for="form-username" class="uk-form-label" style="display:inline-padding: 0 10vertical-align:margin-left:7"&邮箱密码&/label&
&input class="" id="service_mailpass" readonly="readonly" style="margin-left: 5width:400height:30" type="text" name="service_help" placeholder=""&
&div class="uk-form-row"&
&div class="uk-form-controls"&
&label for="form-username" class="uk-form-label" style="display:inline-padding: 0 10vertical-align:margin-left:7"&投稿加急&/label&
&input class="" id="service_date" readonly="readonly" style="margin-left: 5width:400height:30" type="text" name="service_help" placeholder=""&
&div class="uk-form-row" style="display:inline-"&
&div class="uk-form-controls"&
&label for="form-username" id="notes1" class="uk-form-label" style="display:padding: 0 10vertical-align:margin-left:7margin-top:-150"&改写需求&/label&
&textarea cols="20" rows="3" readonly="readonly" style="display:margin-left: 5 height: 100 width: 400" name="service_notes" id="notes2" placeholder=""&&/textarea&
&label for="form-username" id="remark1" class="uk-form-label" style="display:padding: 0 10vertical-align:margin-left:7margin-top:-150"&投稿备注&/label&
&textarea cols="20" rows="3" readonly="readonly" style="display:margin-left: 5 height: 100 width: 400" name="service_notes" id="remark2" placeholder=""&&/textarea&
&div class="modal-footer"&
&button type="button" class="btn btn-default" data-dismiss="modal"&Close&/button&
&/div&&!-- /.modal-content --&
&/div&&!-- /.modal-dialog --&
&/div&&!-- /.modal --&
&!--模态框结束--&
实现效果如图：
以上所述是小编给大家介绍的Bootstrap模态框调用功能实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具