热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Bootstrap如何弹出modal窗,并动态传值

注意怎么展示和传值呢?展示:点击事件触发后,用$('#模型框id').modal('show&amp
 1 
class="modal fade" id="qrcode" tabindex="-1" role="dialog" aria-labelledby="information"> 2
class="modal-dialog"> 3
class="modal-content"> 4
class="modal-header"> 5 8

class="modal-title">请扫描二维码,完成支付

9
10
class="modal-body" > 11

12 QRCode 13
14
15
16
17
 1 $(function () {
 2     $(\'#popup\').on(\'click\', function(){
 3       $(\'#qrcode\').modal(\'show\');
 4     });
 5     $(\'#qrcode\').on(\'show.bs.modal\', function (event) {
 6       var modal = $(this);  //get modal itself
 7       modal.find(\'.modal-body #message\').text(\'your message\');
 8       modal.find(\'.modal-body #scan\').attr("src", \'image src\');
 9     });
10   });

注意怎么展示和传值呢?

展示:点击事件触发后,用$(\'#模型框id\').modal(\'show\');

传值:

 1 $(function () {
 2     $(\'#popup\').on(\'click\', function(){
 3       $(\'#qrcode\').modal(\'show\');//展示
 4     });
 5     $(\'#qrcode\').on(\'show.bs.modal\', function (event) {//模型框显示后,可以定义里面的值,这个不是动态的值,用处不大
 6       var modal = $(this);  //get modal itself
 7       modal.find(\'.modal-body #message\').text(\'your message\');
 8       modal.find(\'.modal-body #scan\').attr("src", \'image src\');
 9     });
10   });

方法二:

直接传递的是动态的值:

 

将页面数据传递到modal的首要步骤:把要传过去的值添加在在触发模态框的标签上

然后通过js把值从页面传递到模态框中:
$(function() {
$(\'#discussionModifyModal\').on(\'show.bs.modal\', function (event) {
 var a = $(event.relatedTarget) // a that triggered the modal
 var id = a.data(\'id\'), title = a.data(\'title\'), description = a.data(\'description\'); 
 var modal = $(this)
 modal.find(\'#cm-modal-id\').val(id);
 modal.find(\'#cm-modal-title\').val(title);
 modal.find(\'#cm-modal-content\').val(description);
});
});
原博:
 

推荐阅读
author-avatar
Mayuki命_103
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有