modal_modal获取值 - CSDN
精华内容
参与话题
  • 前言:这一片文章我们将对bootstrap的modal模态框进行学习,学习他是如何绑定到一个按钮上去点击显示,学习模态框的简单数据配置,学习模态框的使用方式,事件,方法、参数等;下面是modal的内容总结。 ...
    前言:这一片文章我们将对bootstrap的modal模态框进行学习,学习他是如何绑定到一个按钮上去点击显示,学习模态框的简单数据配置,学习模态框的使用方式,事件,方法、参数等;下面是modal的内容总结。

    目录:
        
        1.模态框的大小以及动画效果禁用
        2.通过button传递内容给绑定的modal
        3.模态框的调用方法
        4.模态框的一些配置参数以及作用
        5.模态框的一些方法
        6.模态框的事件监听

    1.模态框的大小以及动画效果禁用
        模态框的大小用modal-lg和modal-sm属性去设置,而动画的限制我们需要不使用fade类,接下来还是使用一个示例,在实践中去理解,敲一遍什么都懂了。
      
    示例代码:
        效果截图:


     2.通过button传递内容给绑定的modal
            这个没什么好描述的,主要是js部分代码,请仔细看,直接上代码
    1
    <!DOCTYPE html>
    2
    <html>
    3
    <head lang="en">
    4
        <meta charset="UTF-8">
    5
        <title>组件</title>
    6
        <!--引入bootstrap样式文件-->
    7
        <link href="css/bootstrap.min.css" rel="stylesheet">
    8
        <!--引入jq(必须在bootstrap.min.js文件之前)-->
    9
        <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
    10
        <!--引入bootstrap js-->
    11
        <script type="application/javascript" src="js/bootstrap.min.js"></script>
    12
    </head>
    13
    <body style="margin: 60px">
    14
    15
        <!--按钮传递参数并modal
    16
            注意:(1)下面是通过data属性将button和modal绑定的,后面会学习js调用modal
    17
                 (2)依然是 data-target 绑定modal使用了css的选择器的语法可以使用 .号选择类和 #选择id
    18
                  (3) data-dismiss="modal"设置隐藏modal
    19
        -->
    20
        <button data-whatever="201987771" type="button" class="btn btn-danger" data-toggle="modal" data-target="#qqModal">qq邮箱modal</button>
    21
    22
        <div id="qqModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="largerModal">
    23
            <div class="modal-dialog modal-sm" role="document">
    24
                <div class="modal-content">
    25
                    <div class="modal-header">输入qq邮箱</div>
    26
                    <div class="modal-body">
    27
    28
                        <div class="input-group">
    29
                                <input type="text" class="form-control" id="recipient-name">
    30
                                <span class="input-group-addon" id="basic-addon1">@qq.com</span>
    31
                        </div>
    32
                    <div class="modal-footer">
    33
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
    34
                        <button type="button" class="btn btn-primary">确定</button>
    35
                    </div>
    36
                </div>
    37
            </div>
    38
        </div>
    39
        </div>
    40
    </body>
    41
    </html>
    42
    43
    <script type="text/javascript">
    44
    45
        $('#qqModal').on('show.bs.modal', function (event) {
    46
    47
            //获取到触发modal的button
    48
            var button = $(event.relatedTarget);
    49
    50
            //获取button的传入值
    51
            var recipient = button.data('whatever');
    52
    53
            console.log(recipient);
    54
    55
            //获取当前显示的modal
    56
            var modal = $(this);
    57
    58
            //设置获取的值到输入框
    59
            modal.find('.modal-body .input-group input').val(recipient)
    60
        })
    61
    </script>
        效果截图


     
    已经将默认的qq传递给了modal。
        
    3.模态框的调用方法
        3.1)data属性调用有下面两种
       3.2)js调用显示modal框 
    1
    <script type="text/javascript">
    2
    3
        /*可以简单配置一些属性*/
    4
        $('#qqModal').modal({
    5
            backdrop:'static',
    6
            keyboard:false,
    7
            show:true
    8
        })
    9
    </script>

    4.模态框的一些配置参数以及作用
        其实上面3.2就配置了这些基本的属性,那作用是啥呢?看下面的总结表。
    backdrop:'static' 设置显示灰色透明背景,但是点击不可关闭
    backdrop:true 显示灰色半透明背景且点击非modal区域可关闭
    backdrop:false 不显示灰色半透明背景且点击非modal区域不可关闭
    keyboard:true 设置键盘 【ESC】键可关闭modal
    keyboard:true 【ESC】键不能关闭modal
    show:true 设置模态框初始化之后就立即显示出来
     
    5.模态框的一些方法
            还没有了解为什么多了这么多个方法,还不清楚他们各自的应用场景,先不提。

    6.模态框的事件监听
        
        事件监听我们直接来一个代码示例,从代码来体会。
        先来看效果截图:

     示例代码:
    1
    <!DOCTYPE html>
    2
    <html>
    3
    <head lang="en">
    4
        <meta charset="UTF-8">
    5
        <title>组件</title>
    6
        <!--引入bootstrap样式文件-->
    7
        <link href="css/bootstrap.min.css" rel="stylesheet">
    8
        <!--引入jq(必须在bootstrap.min.js文件之前)-->
    9
        <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
    10
        <!--引入bootstrap js-->
    11
        <script type="application/javascript" src="js/bootstrap.min.js"></script>
    12
    </head>
    13
    <body style="margin: 60px">
    14
    15
        <button class="btn bg-info show-modal">点我</button>
    16
        <div id="wangModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="largerModal">
    17
            <div class="modal-dialog modal-sm" role="document">
    18
                <div class="modal-content">
    19
                    <div class="modal-header">隔壁老王给你打招呼</div>
    20
                    <div class="modal-body">
    21
    22
                        <span>程序猿哥哥,你好,我是你隔壁的老王,嫂子在家吗?</span>
    23
                    <div class="modal-footer">
    24
                        <button type="button" class="btn btn-default" data-dismiss="modal">不在</button>
    25
                        <button type="button" class="btn btn-primary"></button>
    26
                    </div>
    27
                </div>
    28
            </div>
    29
        </div>
    30
        </div>
    31
    </body>
    32
    </html>
    33
    34
    <script type="text/javascript">
    35
    36
        $(function(){
    37
    38
            $(".show-modal").click(function(){
    39
                $('#wangModal').modal({});
    40
    /*            $('#wangModal').modal('toggle');
    41
                $('#wangModal').modal('show');
    42
                $('#wangModal').modal('hide');*/
    43
            });
    44
    45
            $('#wangModal').on('show.bs.modal',function(e){
    46
                alert("你确定要看吗?")
    47
            });
    48
    49
            $('#wangModal').on('shown.bs.modal',function(e){
    50
                alert("好吧给你看,你可别打我!")
    51
            });
    52
    53
            $('#wangModal').on('hide.bs.modal',function(e){
    54
                alert("不看啦?")
    55
            });
    56
    57
            $('#wangModal').on('hidden.bs.modal',function(e){
    58
                alert("好吧没了")
    59
            });
    60
    61
            //从远端获取数据时触发
    62
            $('#wangModal').on('loaded.bs.modal',function(e){
    63
                console.log("用不上");
    64
            });
    65
        });  
    66
    </script>
        好的,bootstrap模态框就学习到这里。
    展开全文
  • modal是什么

    2019-05-21 07:37:09
    模态框(Modal)是覆盖在父窗体上的子窗体。 通常用于显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。 子窗体可提供信息、交互等。 ...

    modal 模态框,它是覆盖在父窗体上的子窗体
    modal 通常用于显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。
    (子窗体可提供信息、交互等)
    在这里插入图片描述

    展开全文
  • $modal 参数 以及 使用方法

    千次阅读 2019-07-05 17:23:05
    $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用...

    $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们

    $modal仅有一个方法open(options)

    • templateUrl:模态窗口的地址
    • template:用于显示html标签
    • scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope
    • controller:为$modal指定的控制器,初始化$scope,该控制器可用$modalInstance注入
    • resolve:定义一个成员并将他传递给$modal指定的控制器,相当于routes的一个reslove属性,如果需要传递一个objec对象,需要使用angular.copy()
    • backdrop:控制背景,允许的值:true(默认),false(无背景),“static” - 背景是存在的,但点击模态窗口之外时,模态窗口不关闭
    • keyboard:当按下Esc时,模态对话框是否关闭,默认为ture
    • windowClass:指定一个class并被添加到模态窗口中

    open方法返回一个模态实例,该实例有如下属性

    • close(result):关闭模态窗口并传递一个结果
    • dismiss(reason):撤销模态方法并传递一个原因
    • result:一个契约,当模态窗口被关闭或撤销时传递
    • opened:一个契约,当模态窗口打开并且加载完内容时传递的变量

    另外,$modalInstance扩展了两个方法$close(result)$dismiss(reason),这些方法很容易关闭窗口并且不需要额外的控制器

     

    1. <!DOCTYPE html>  
    2. <html ng-app="ModalDemo">  
    3. <head>  
    4.     <title></title>  
    5.     <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">  
    6.     <script src="lib/angular/angular.min.js"></script>  
    7.     <script src="lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.7.0.min.js"></script>  
    8.     <script src="lib/angular/i18n/angular-locale_zh-cn.js"></script>  
    9. </head>  
    10. <body>  
    11. <div ng-controller="ModalDemoCtrl">  
    12.     <script type="text/ng-template" id="myModalContent.html">  
    13.         <div class="modal-header">  
    14.             <h3>I'm a modal!</h3>  
    15.         </div>  
    16.         <div class="modal-body">  
    17.             <ul>  
    18.                 <li ng-repeat="item in items">  
    19.                     <a ng-click="selected.item = item">{{ item }}</a>  
    20.                 </li>  
    21.             </ul>  
    22.             Selected: <b>{{ selected.item }}</b>  
    23.         </div>  
    24.         <div class="modal-footer">  
    25.             <button class="btn btn-primary" ng-click="ok()">OK</button>  
    26.             <button class="btn btn-warning" ng-click="cancel()">Cancel</button>  
    27.         </div>  
    28.     </script>  
    29.     <button class="btn" ng-click="open()">Open me!</button>  
    30. </div>  
    31. <script>  
    32.     var ModalDemo = angular.module('ModalDemo', ['ui.bootstrap']);  
    33.     var ModalDemoCtrl = function ($scope, $modal, $log) {  
    34.         $scope.items = ['item1', 'item2', 'item3'];  
    35.         $scope.open = function () {  
    36.             var modalInstance = $modal.open({  
    37.                 templateUrl: 'myModalContent.html',  
    38.                 controller: ModalInstanceCtrl,  
    39.                 resolve: {  
    40.                     items: function () {  
    41.                         return $scope.items;  
    42.                     }  
    43.                 }  
    44.             });  
    45.             modalInstance.opened.then(function(){//模态窗口打开之后执行的函数  
    46.                 console.log('modal is opened');  
    47.             });  
    48.             modalInstance.result.then(function (result) {  
    49.                  console.log(result);  
    50.             }, function (reason) {  
    51.                 console.log(reason);//点击空白区域,总会输出backdrop click,点击取消,则会暑促cancel  
    52.                 $log.info('Modal dismissed at: ' + new Date());  
    53.             });  
    54.         };  
    55.     };  
    56.     var ModalInstanceCtrl = function ($scope, $modalInstance, items) {  
    57.         $scope.items = items;  
    58.         $scope.selected = {  
    59.             item: $scope.items[0]  
    60.         };  
    61.         $scope.ok = function () {  
    62.             $modalInstance.close($scope.selected);  
    63.         };  
    64.         $scope.cancel = function () {  
    65.             $modalInstance.dismiss('cancel');  
    66.         };  
    67.     };

    转载于:https://www.cnblogs.com/cench/p/5602819.html

    展开全文
  • 效果图:  自己可以添加内容;   引用:amazeui前端框架: &lt;link rel="stylesheet" href="/tc_vsmp/view/assets/css/utils/amazeui.min.css"/&gt;.../sc...

     效果图:

      自己可以添加内容;

     

    引用:amazeui前端框架:

     <link rel="stylesheet" href="/tc_vsmp/view/assets/css/utils/amazeui.min.css"/>
     <script src="/tc_vsmp/view/assets/js/utils/amazeui.min.js"></script>

    弹出页面:

    <!-- start modal -->
    	<div class="am-modal am-modal-prompt form-am-modal" tabindex="-1" id="handle-form-modal-credit">
    		<div class="am-modal-dialog">
    			<div class="am-modal-hd">XXX</div>
    			<div class="am-modal-bd">
    				<form class="am-form am-form-horizontal" id="handle-form-credit">
    					<div class="am-form-group">
    						<label class="am-u-sm-3 am-form-label">XXX</label>
    						<div class="am-u-sm-9">
    							<input type="hidden" name="id" id="loanApplyId" value="">
    
    							<input type="text" id="table-item-operator" name="operator" value="${loginUser}" class="am-modal-prompt-input" readonly>
    						</div>
    					</div>
    					<div class="am-form-group">
    						<label class="am-u-sm-3 am-form-label">XXX</label>
    						<div class="am-u-sm-9">
    							<input type="text" name="apply_amount" id="creditApplyAmount1" class="am-modal-prompt-input" placeholder="XXXXXX">
    						</div>
    					</div>
    					<div class="am-form-group">
    						<label class="am-u-sm-3 am-form-label">XXX</label>
    						<div class="am-u-sm-9">
    							<select data-am-selected id="table-item-capital-source" name="capital_source">
                                    <option value="0">XXX</option>
                                   <option value="1">XXX</option>
                                   <option value="2">XXX</option>
                                   <option value="3">XXX</option>
                                   <option value="4">XXX</option>
    								<option value="5">XXX</option>
                                </select>
    						</div>
    					</div>
    				</form>
    			</div>
    			<div class="am-modal-footer">
    				<span class="am-modal-btn" data-am-modal-cancel>取消</span>
    				<span class="am-modal-btn" data-am-modal-confirm>提交</span>
    			</div>
    		</div>
    	</div><!-- end modal-->

    触发按钮:

    <a href="javascript:void(0);" class="am-btn am-btn-primary handle-btn" onclick="creditApplyAmount('{{= lat_id}}')"><span class="am-icon-archive"></span> 授信额度 </a>

    js:

    //按钮触发
    function creditApplyAmount(id) {
    
           //页面处理按钮的提交
           $('#handle-form-modal-credit').modal({
               relatedTarget: this,
               closeViaDimmer:false,//点击遮罩层时关闭 Modal
               closeOnConfirm:false,//点击确认时不关闭窗口
               onConfirm: function(e) {
                   var apply_amount = $("#creditApplyAmount1").val();
                   var capital_source  =  $("#table-item-capital-source").val();
                   $.ajax({
                       type:"POST",
                      // contentType:"application/json", //WebService 会返回Json类型
                       url:basePath+"credit/updateLoanApplyCredit",
                       data: 
                       {"id":id,"apply_amount":apply_amount,"capital_source":capital_source},
                       dataType:"json",
                       success:function(data){
                           if(data==1){
                               $('#handle-form-modal-credit').modal('close');
                               $("#creditApplyAmount1").val("");
                               $("#table-item-capital-source  option[value='0'] 
                                 ").attr("selected",true);
                               alert("成功!");
                               //刷新页面
                               commitAjax({'url':getDataUrl(),
                                   'param':getQueryCondition()});
    
                           }else{
    
                               alert("失败!");
                           }
                       },
                       error:function(){
    
                           alert("异常");
                       }
                   });
    
               },
               onCancel: function(e) {
                   var apply_amount = $("#creditApplyAmount1").val("");
                   $("#table-item-capital-source  option[value='0'] ").attr("selected",true);
                   //alert('你取消提交了!');
               }
           });
    
       }
    

    后端代码:

      /**
         * xxxxx
         * @param loanApply
         * @param request
         * @return
         */
        @RequestMapping("/updateLoanApplyCredit")
        @ResponseBody
        public Integer updateLoanApplyCredit(
                 LoanApply loanApply,
                HttpServletRequest request)
        {
    
           
            Integer a = 0;
            try {
                a = service.updateLoanApplyAmount(loanApply);
                BaseController.saveLog(
                        SecurityUtils.getSubject().getPrincipals().toString(),
                        DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss"),
                        DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss"),
                        BaseController.getRequestIp(request), "xxxxx",
                        "xxxxxxx", 1, 1, "");
            }
            catch (Exception e)
            {
                BaseController.saveLog(
                        SecurityUtils.getSubject().getPrincipals().toString(),
                        DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss"),
                        DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss"),
                        BaseController.getRequestIp(request), "xxxxx",
                        "xxxxxxx, 0, 1, "");
            }
            return a;
        }
    

     

     

     

    展开全文
  • 自定义Modal组件

    2020-09-10 17:34:19
    弹窗效果 1.需求来源 因最近做移动端页面,页面....gf-modal { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 100; pointer-events: none; &.gf-show-mask { pointer-events: auto;
  • Modal

    2020-04-15 21:02:23
    Modal Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. ads via Carbon Adobe Creative Cloud for Teams starting at $...
  • 你这样试试,这是官方文档的写法 $('#myModal').modal('show') //显示$('#myModal').modal('hide')隐藏 //重复点击的隐藏显示有一个很更方便的写法$('#myModal').modal('toggle') s := '$("#cancheck_form").find...
  • 环境搭建 用 create-react-app 快速搭建一个 ...新建文件 src/modal/index.jsx, 并写入一段简单的测试代码 import React, { Component } from 'react'; import './index.css'; class Modal extends Component { re...
  • iview框架中遇到在modal中嵌套modal

    千次阅读 2018-10-31 10:30:26
    在iview中modal的z-index是一样的,都是1000,但是很多时候需要在modal1的上面弹出modal2,这时需要对modal添加一个class-name,然后对这个class添加属性值{z-index:1002},这时解决了modal2显示在modal1上,可是...
  • bootstrap中的模态框(modal,弹出层)

    万次阅读 多人点赞 2016-08-16 14:08:00
    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集。务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免...
  • 您可以切换模态框(Modal)插件的隐藏内容: 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#...
  • angularjs 弹出框 $modal

    万次阅读 2015-11-04 09:50:49
    $modal只有一个方法:open,该方法的属性有: templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$...
  • iView的Modal填坑之旅

    万次阅读 2018-03-16 18:04:41
    现象和需求描述: 有个表格,需要添加登记和查看功能,准备用一个modal(模态框)来实现。在设计过程中,希望能够实现最大的模块化和重用性。故一开始,设计了一个将iView的Modal和内部参数全部放入一个vue ...
  • 如两个modal,在第一个modal上又显示第二个modal。 默认情况下,两个modal可以同时操作。 但如果想打开第二个modal的时候,禁止操作第一个modal上的内容,可以通过再创建一个新的modal,作为中间层。 这个中间层modal...
  • iView-UI:使用Modal调用Modal

    千次阅读 2019-10-23 20:10:54
    iView的Modal真的非常不友好,用起来总感觉this.$Modal多次调用的话采用的是引用的方式,结果导致后面的Modal的属性会覆盖前面的Modal,而前面的Modal一关闭导致写在onOK函数里面的Modal也一并关闭了。 解决方案 我...
  • 1、show.bs.modal,当 show 实例方法被调用之后,此事件被立即触发。 //id选择器选中modal框 $('#modal').on('show.bs.modal', function () { // 执行一些动作... }) 2、shown.bs.modal,当模态框对用户可见时...
  • React 实现 Modal 思路简述

    千次阅读 2019-05-24 09:37:24
    Modal 简述 模态对话框。需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用 Modal 在当前页面正中打开一个浮层,承载相应的操作。 另外当需要一个简洁的确认框询问用户时,可以使用 Modal.confirm() ...
  • antd中Modal组件的使用

    千次阅读 2019-08-21 10:11:51
    对于刚接触antd的小白来说来弄懂Modal组件,还真不是一件简单的事情,关于如何取值,如何赋值,是我刚开始遇到的很大的问题: 1.Modal组件的使用 首先想去很好的展示Modal框,得需要明白该组件中的一些属性,官网...
  • 因为最近一直在用modalmodal上再出现modal也是常见的, 但是遇到了一个bug---例如在modal1上弹出一个modal2,关闭modal2之后,会导致modal1滚动条消失,无法滚动。hack:就是在css样式中,增加一个样式:.modal{...
  • 这里也会遇到一次性关闭所有modal引起阴影遮罩的问题,也就是所有modal都关闭了,但是主页面仍然被阴影遮罩.这个问题从哪来的,是因为modal叠加,我们点击窗口之外的空白部分,一次性关闭所有model,但是modal自己...
1 2 3 4 5 ... 20
收藏数 64,312
精华内容 25,724
关键字:

modal