bootstrap弹出登录及成功页面_bootstrap页面子页面弹出 - CSDN
精华内容
参与话题
  • BootStrap】--登录加载模态框提示

    千次阅读 2016-10-14 14:10:00
    有心的朋友不难发现,不少BS系统,用户登录之后,会立马弹出一个弹出框,写着用户的操作情况,对用户有很好的提示作用,提高了用户体验度。在新生入学系统V4.0中,也有类似的功能。新生马上登陆新生入学系统后,会...

    前言

             有心的朋友不难发现,不少BS系统,用户登录之后,会立马弹出一个弹出框,写着用户的操作情况,对用户有很好的提示作用,提高了用户体验度。在新生入学系统V4.0中,也有类似的功能。新生马上登陆新生入学系统后,会立马弹出一个模态框,显示该生有多少信息还没有录入,缴费情况等等。那么该弹出框如何实现的呢?下面让我来揭晓。


    效果图


    模态框代码实现

    <!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap 实例 - 模态框(Modal)插件</title>
        <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <script src="/scripts/jquery.min.js"></script>
        <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
        <h2>创建模态框(Modal)</h2>
        <!-- 按钮触发模态框 -->
        <button class="btn btn-primary btn-lg" data-toggle="modal"
            data-target="#myModal">
            开始演示模态框
        </button>
    
        <!-- 模态框(Modal) -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">温馨提示
                        </h4>
                    </div>
                    <div class="modal-body">
                        王美同学,您好!
                       <p>
                           您的<b style="color: blue">录入信息</b>中<b style="color: blue">家庭信息</b>、<b style="color: blue">教育经历</b>信息已经完善完毕!还需要填写<b style="color: blue">个人信息</b>实现<b style="color: blue">缴费明细</b>就能报到成功啦!加油!
                       </p>
                    </div>
                    <div class="modal-footer">
    
                        <button type="button" class="btn btn-primary" data-dismiss="modal">
                            <div class ="pull-right">
                                 <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>启程
                            </div>
                           
                        </button>
                        @*按钮*@
                        
                        </div>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>   
        <!-- 模态框(Modal) -->
       
    
    </body>
    
        @*页面加载,显示模态框*@
        <script type="text/javascript">
            $(document).ready(function () {
                $('#myModal').modal('show');
            });
        </script>
    
    
    </html>

    需要完善

             现在模态框立马的流程数据(例如 学生信息  公约一览)还是死的,下一步要做的就是在数据库中存入相应的流程信息,并给定判断流程完成的条件。假设数据库中,流程状态为Status,完成为true,默认为false。则如果完成,则修改Status为true。显示完成和未完成,需要遍历数据库的两种Status情况的数据,显示即可。


    总结

            全心全意为人民服务是我们的宗旨。所有复杂的技术都是一步一步简单的技术点组建起来的。有的时候不是难,而是缺乏一步一步分析的耐心和一步一步坚持做下去的坚定。




    展开全文
  • 当我输入http://localhost:8096/fontal,出现登录页面http://localhost:8096/fontal/login 1 页面跳转到下面的登录页面的呢 我的login.jsp在WEB-INF/views目录下面,我输入的是http://localhost:8096/fontal,...

    当我输入http://localhost:8096/fontal,出现了登录页面http://localhost:8096/fontal/login
    1
    1 页面跳转到下面的登录页面的呢
    我的login.jsp在WEB-INF/views目录下面,我输入的是http://localhost:8096/fontal,为什么他能自己跳转到http://localhost:8096/fontal/login,这个/login是如何出现的呢?页面又是如何渲染的呢?
    2
    首先看spring-mvc.xml
    <mvc:view-controller path="/" view-name="redirect:/login"/>,你就知道了,这里将/的页面路径,自己重定向到了/login
    当重定向到http://localhost:8096/fontal/login,浏览器将向后台发送get请求,现在可以看看后台是怎么做的。
    3
    这里返回的是login的字符串,这跟login.jsp页面有什么关系呢?
    还是回到spring-mvc.xml中的配置,springmvc将为您将在/WEB-INF/views/中找到 login.jsp的文件,找到了就会把它渲染出来。那么也就是我们看到了登录页面。

    <!-- 对模型视图名称的解析,在请求时模型视图名称添加前后缀 -->
    	<bean id="viewResolver"
    		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    		<property name="viewClass"
    			value="org.springframework.web.servlet.view.JstlView"></property>
    		<property name="prefix" value="/WEB-INF/views/" />
    		<property name="suffix" value=".jsp" />
    	</bean>
    

    2 点击登录按钮发生了什么
    看看登录页面,有四个主要的角色:用户名、密码、验证码、登录按钮.
    我这里使用的是requirejs,点击登录按钮,执行了什么。首先要找到对应的js文件。
    从下图找到了login.jsp需要login.js,但是下图的方框中只有login的名称,没有js具体的路径,怎么办呢?
    4
    这个时候就需要去找rqconfig.js,因为我们用的requirejs,所以需要使用rqconfig,对requirejs进行相关配置,从下图找打了一个baseUrl路径,这里是我们用到js文件的基础路径。
    5
    从下图文件路径,您可以在page/modules下面找到了login.js文件了
    6
    下面看看login.js中initConfig对登录表单采用bootstrapvalidate设置了规则做校验,而initAction中通过jQuery对btnSubmit进行绑定click事件,也就是说当你点击登录按钮的时候,就会触发登录事件了。

    define(function(require, exports, module) {
    	// 引入js和css
    	require('validate');
    	require('md5');
    	var $ = require('jquery');
    	var toastr = require('toastr');
    	var Ladda = require('ladda');
    	// 初始化区域
    	$(function(){
    		init();
    	});
    	function init(){
    		initConfig();
    		initAction();
    	}
    	function initConfig(){
    		$('#loginForm').bootstrapValidator({
    			message : '非法值',
    			feedbackIcons : {
    				valid : 'glyphicon glyphicon-ok',
    				invalid : 'glyphicon glyphicon-remove',
    				validating : 'glyphicon glyphicon-refresh'
    			},
    			fields:{
    				username:{validators:{notEmpty:{message:'用户名不能为空'},stringLength:{min:2,max:20,message:'用户名长度应在2-20位'}}},
    				password:{validators:{notEmpty:{message:'密码不能为空'},stringLength:{min:6,max:20,message:'密码长度应在6-20位'}}},
    				captcha:{validators:{notEmpty:{message:'验证码不能为空'},stringLength:{min:4,max:4,message:'验证码长度不正确'}}}
    			}
    		}).on('success.form.bv',function(e){
    			e.preventDefault();
    			var $form = $(e.target);
    			doLogin($form);
    		});
    	}
    	function initAction(){
    		$('#btnSubmit').on('click',function(e){
    			$('#loginForm').bootstrapValidator('validate');
    		})
    		$('#img_captcha').on('click',function(e){
    			document.getElementById("img_captcha").src=ctxResources + "/images/kaptcha.jpg?t=" + Math.random();  
    		})
    		$("#loginForm input").each(function(){
    			$(this).bind('keypress',function(event){
    		        if(event.keyCode == "13") {
    		        	$('#loginForm').bootstrapValidator('validate');
    		        	return false;
    		        }
    		    });
    		});
    	}
    	// 业务逻辑区域
    	function doLogin(form){
    		var md5Pass = hex_md5(hex_md5($("#password").val()));
    		$("#password").val(md5Pass);
    		var process= Ladda.create($('#btnSubmit')[0]);
    		process.start();
    		$.ajax({
    			url:ctx+'/login',
    			type:'post',
    			data:form.serialize(),
    			success:function(resp){
    				if (!resp.success){
    					toastr.error(resp.msg);
    					// 
    					form.data('bootstrapValidator').resetForm(true);
    					$('#img_captcha')[0].click();
    				} else{
    					window.location.href = ctx+'/index';
    				}
    			}
    		}).always(function(){process.stop();});
    	}
    });
    

    3 点击验证码是怎么刷新的
    先看login.jsp,这里的图片引用的是 /resources/images/kaptcha.jpg,

    div class="col-sm-6">
                        <img alt="验证码" class="img-responsive" src="${ctx}/resources/images/kaptcha.jpg" title="点击更换" id="img_captcha" style="height:34px;" />
                    </div>
    

    但是你会发现我们的images里面并没有kaptcha.jpg,为什么呢?这个时候需要找到web.xml,您可以找到kaptcha的配置,这里定义一个生成验证码的servlet,图片就是这么产生的。
    6
    刷新验证也更简单,更改img的src就可以

    document.getElementById("img_captcha").src=ctxResources + "/images/kaptcha.jpg?t=" + Math.random();
    

    4 登录逻辑是什么
    看看LoginController.java中登录的逻辑,从下图红色圈圈中,我们这里的登录使用到了apache shiro。
    7
    找到spring-shiro.xml中下图框框的内容,您就知道了上图subject.login(token);将会进入什么类中,哦是UserRealm
    8
    下面就是login进入UserRealm的代码,他会将登录成功之后的用户session信息托管给shiro,让shiro进行保存。

    /**
         * 认证回调函数,登录时调用.
         * 
         * @see org.apache.shiro.realm.AuthenticatingRealm#doGetAuthenticationInfo(org.apache.shiro.authc.AuthenticationToken)
         */
        @Override
        protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token)
                throws AuthenticationException {
            UsernamePasswordCaptchaToken authcToken = null;
            try {
                authcToken = (UsernamePasswordCaptchaToken) token;
            } catch (Exception e) {
                logger.error("doGetAuthenticationInfo 失败原因:{}", e.getMessage());
                throw new IllegalArgumentException("参数异常");
            }
            // 验证码校验
            if (doCaptchaValidate(authcToken)) {
                // 根据用户名获取账号信息
                UcsUser ucsUser = ucsUserService.selectByUsername(authcToken.getUsername());
                // 验证码校验
                if (null == ucsUser) {
                    throw new UnknownAccountException("不存在此用户");// 没找到帐号
                }
                String ciphertextPassword = new SimpleHash(hashAlgorithmName, authcToken.getPassword(),
                        ByteSource.Util.bytes(ucsUser.getSalt()), hashIterations).toHex();
                if (!ciphertextPassword.equals(ucsUser.getPassword())) {
                    throw new UnknownAccountException("用户名或密码错误");// 没找到帐号
                }
                // 验证用户状态的合法性
                if (!BaseConstant.Status.ENABLE.equals(ucsUser.getStatus())) {
                    throw new IncorrectCredentialsException("授权失败");
                }
                ShiroUser shiroUser = new ShiroUser(ucsUser.getId(), ucsUser.getUsername(),
                        ucsUser.getName());
                return new SimpleAuthenticationInfo(shiroUser, ucsUser.getPassword(),
                        ByteSource.Util.bytes(ucsUser.getSalt()), getName());
            }
            return null;
        }
    

    5 验证码是如何校验呢
    看看下面的代码,你可以直观的明白验证码是如何匹配正确性的,这里是将用户名、密码、验证码一起form提交校验,如果您的系统需要先校验系统,那么就将下面的代码稍作调整,使用controller对其封装就可以了。

     protected boolean doCaptchaValidate(UsernamePasswordCaptchaToken token) {
            String captcha = (String) SecurityUtils.getSubject().getSession()
                    .getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
            if (captcha != null && !captcha.equalsIgnoreCase(token.getCaptcha())) {
                throw new CaptchaException("验证码错误!");
            }
            return true;
        }
    

    6 登录成功后如何跳转到首页的
    login.js中doLogin方法window.location.href = ctx+'/index';,登录成功将后台发起index的get请求,我们再看看LoginController中,这里返回的字符串是system/index,按照上面说的,我们从view/modules中找到了index.jsp,springmvc将对其进行渲染,于是首页你就可以看到了

    @RequestMapping(value = "/index")
        public String index(){
            return "system/index";
        }
    

    9

    展开全文
  • 最近做的网站涉及到访问控制,在访问需要登录才能使用的页面或功能时,会弹出登录框:  效果如下:  图 1-点击用户名时,如未登录弹出登录框 对这个功能的详细描述: 不涉及到登录时,登录框隐藏涉及到...

    最近做的网站涉及到访问控制,在访问需要登录才能使用的页面或功能时,会弹出登录框: 
    效果如下: 
    这里写图片描述
    图 1-点击用户名时,如未登录弹出登录框

    对这个功能的详细描述:

    • 不涉及到登录时,登录框隐藏
    • 涉及到登录时,登录框弹出到页面左上角
    • 登陆成功后登录框隐藏

      实现思路: 
      body结束标签之前插入登录的div,设其定位方式为absolute,位置在左上角。 
      登录框默认的display属性为none。触发登录时,将该属性改为block 
      附上示例代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        h3{width:100%;padding-bottom:10px;border-bottom:2px solid #CCC;}
        #close{position:absolute;top:2px;right:2px;}
        #close span{padding:3px 10px;background-color: #999;font-size:20px;color:white;cursor:pointer;}
        #log{display: none; width: 400px; height: 400px; padding: 30px 40px; background-color: #F3F5F6; position: fixed; top: 70px;; right: 30px;}
        .error{float:right;color:red;font-size:1.2em;margin-right:10px}
    </style>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
    <body>
    <button onclick="document.getElementById('log').style.display='block'">弹出登录框</button>
    
    <div id="log">
        <form  action="../control/logincheck.php" method="post">
            <h3 >请登录</h3>
            <div class="form-group">
                <label for="username">用户名*</label>
                <span id="user"  class="error"> </span>
                <input type="text" class="form-control"  name="username"
                       id="username" placeholder="用户名" onblur='checkName()' required />
            </div>
            <div class="form-group">
                <label for="password">密码*</label>
                <span id="psword" class="error"> </span>
    
                <input type="password" class="form-control"
                       name="password"
                       id="password" placeholder="密码" onblur='checkPassword()' required />
    
            </div>
            <div class="checkbox">
                <label>
                    <span><input type="checkbox" value='true' style="width:15px;height:15px;" > 记住我</span>
    
                </label>
            </div>
            <input type="submit" class="btn btn-primary login-button" value="登录" style="width:70px;height:40px;" />
            <p class="text-success"  ><a href="register.html">>>还没账号?去注册</a></p>
    
        </form>
    
        <div id="close" >
            <span onclick="document.getElementById('log').style.display='none'">关闭</span>
        </div>
    
    
    
    </div>
    <script>
    
        var checkName=function() {
            document.getElementById("user").innerHTML ="";
            var name = eval(document.getElementById('username')).value;
            if (name.length > 20 || name.length < 1)
                document.getElementById("user").innerHTML = "用户名长度在1-20之间!" ;
        }
        var checkPassword = function(){
            document.getElementById("psword").innerHTML ="";
            var name = eval(document.getElementById('password')).value;
            if (name.length > 12 || name.length < 6)
                document.getElementById("psword").innerHTML="密码长度在6-12之间!" ;
        }
    
    </script>
    </body>
    </html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74

    一种完全用AngularJS实现验证和提示的方法:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
    
    <h2>验证实例</h2>
    
    <form ng-app="myApp" ng-controller="validateCtrl" 
    name="myForm" novalidate>
    
    <p>用户名:<br>
    <input type="text" name="user" ng-model="user" required>
    <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
    <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
    </span>
    </p>
    
    <p>邮箱:<br>
    <input type="email" name="email" ng-model="email" required>
    <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
    <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
    <span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
    </span>
    </p>
    
    <p>
    <input type="submit"
    ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
    myForm.email.$dirty && myForm.email.$invalid">
    </p>
    
    </form>
    
    <script>
    var app = angular.module('myApp', []);
    app.controller('validateCtrl', function($scope) {
        $scope.user = '输入用户名';
        $scope.email = '输入密码';
    });
    </script>
    
    </body>
    </html>
    展开全文
  • bootstrap 各类弹出

    万次阅读 2017-01-18 21:42:42
    在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验。前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理。总...

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑。在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验。前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理。总的来说,弹出提示主要分为三种:弹出框、确定取消提示框、信息提示框。本篇就结合这三种类型分别来介绍下它们的使用。

    一、Bootstrap弹出框

    使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富。与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件。打开bootstrap 文档可以看到它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面的,也就是说,只要我们引入了bootstrap的文件,就可以直接使用它的dialog组件,是不是很方便。本篇我们就结合新增编辑的功能来介绍下bootstrap dialog的使用。废话不多说,直接看来它如何使用吧。

    1、cshtml界面代码

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <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="myModalLabel">新增</h4>
      </div>
      <div class="modal-body">
     
       <div class="form-group">
       <label for="txt_departmentname">部门名称</label>
       <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname" placeholder="部门名称">
       </div>
       <div class="form-group">
       <label for="txt_parentdepartment">上级部门</label>
       <input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment" placeholder="上级部门">
       </div>
       <div class="form-group">
       <label for="txt_departmentlevel">部门级别</label>
       <input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel" placeholder="部门级别">
       </div>
       <div class="form-group">
       <label for="txt_statu">描述</label>
       <input type="text" name="txt_statu" class="form-control" id="txt_statu" placeholder="状态">
       </div>
      </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
       <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
      </div>
      </div>
     </div>
     </div>

    最外面的div定义了dialog的隐藏。我们重点来看看第二层的div

    ?
    1
    <div class="modal-dialog" role="document">

    这个div定义了dialog,对应的class有三种尺寸的弹出框,如下:

    ?
    1
    2
    3
    <div class="modal-dialog" role="document">
    <div class="modal-dialog modal-lg" role="document">
    <div class="modal-dialog modal-full" role="document">

    第一种表示默认类型的弹出框;第二种表示增大的弹出框;第三种表示满屏的弹出框。role="document"表示弹出框的对象的当前的document。

    2、js里面将dialog show出来。

    默认情况下,我们的弹出框是隐藏的,只有在用户点击某个操作的时候才会show出来。来看看js里面是如何处理的吧:

    ?
    1
    2
    3
    4
    5
    //注册新增按钮的事件
    $("#btn_add").click(function () {
     $("#myModalLabel").text("新增");
     $('#myModal').modal();
    });

    对,你没有看错,只需要这一句就能show出这个dialog.

    ?
    1
    $('#myModal').modal();

    3、效果展示
    新增效果

    编辑效果

    4、说明

    弹出框显示后,点击界面上其他地方以及按Esc键都能隐藏弹出框,这样使得用户的操作更加友好。关于dialog里面关闭和保存按钮的事件的初始化在项目里面一般是封装过的,这个我们待会来看。

    二、确认取消提示框

    这种类型的提示框一般用于某些需要用户确定才能进行的操作,比较常见的如:删除操作、提交订单操作等。

    1、使用bootstrap弹出框确认取消提示框

    介绍这个组件之前,就得说说组件封装了,我们知道,像弹出框、确认取消提示框、信息提示框这些东西项目里面肯定是多处都要调用的,所以我们肯定是要封装组件的。下面就来看看我们封装的缺乏取消提示框。

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    (function ($) {
     
     window.Ewin = function () {
     var html = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
        '<div class="modal-dialog modal-sm">' +
         '<div class="modal-content">' +
         '<div class="modal-header">' +
          '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
          '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
         '</div>' +
         '<div class="modal-body">' +
         '<p>[Message]</p>' +
         '</div>' +
         '<div class="modal-footer">' +
     '<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>' +
     '<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>' +
     '</div>' +
         '</div>' +
        '</div>' +
        '</div>';
     
     
     var dialogdHtml = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
        '<div class="modal-dialog">' +
         '<div class="modal-content">' +
         '<div class="modal-header">' +
          '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
          '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
         '</div>' +
         '<div class="modal-body">' +
         '</div>' +
         '</div>' +
        '</div>' +
        '</div>';
     var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
     var generateId = function () {
      var date = new Date();
      return 'mdl' + date.valueOf();
     }
     var init = function (options) {
      options = $.extend({}, {
      title: "操作提示",
      message: "提示内容",
      btnok: "确定",
      btncl: "取消",
      width: 200,
      auto: false
      }, options || {});
      var modalId = generateId();
      var content = html.replace(reg, function (node, key) {
      return {
       Id: modalId,
       Title: options.title,
       Message: options.message,
       BtnOk: options.btnok,
       BtnCancel: options.btncl
      }[key];
      });
      $('body').append(content);
      $('#' + modalId).modal({
      width: options.width,
      backdrop: 'static'
      });
      $('#' + modalId).on('hide.bs.modal', function (e) {
      $('body').find('#' + modalId).remove();
      });
      return modalId;
     }
     
     return {
      alert: function (options) {
      if (typeof options == 'string') {
       options = {
       message: options
       };
      }
      var id = init(options);
      var modal = $('#' + id);
      modal.find('.ok').removeClass('btn-success').addClass('btn-primary');
      modal.find('.cancel').hide();
     
      return {
       id: id,
       on: function (callback) {
       if (callback && callback instanceof Function) {
        modal.find('.ok').click(function () { callback(true); });
       }
       },
       hide: function (callback) {
       if (callback && callback instanceof Function) {
        modal.on('hide.bs.modal', function (e) {
        callback(e);
        });
       }
       }
      };
      },
      confirm: function (options) {
      var id = init(options);
      var modal = $('#' + id);
      modal.find('.ok').removeClass('btn-primary').addClass('btn-success');
      modal.find('.cancel').show();
      return {
       id: id,
       on: function (callback) {
       if (callback && callback instanceof Function) {
        modal.find('.ok').click(function () { callback(true); });
        modal.find('.cancel').click(function () { callback(false); });
       }
       },
       hide: function (callback) {
       if (callback && callback instanceof Function) {
        modal.on('hide.bs.modal', function (e) {
        callback(e);
        });
       }
       }
      };
      },
      dialog: function (options) {
      options = $.extend({}, {
       title: 'title',
       url: '',
       width: 800,
       height: 550,
       onReady: function () { },
       onShown: function (e) { }
      }, options || {});
      var modalId = generateId();
     
      var content = dialogdHtml.replace(reg, function (node, key) {
       return {
       Id: modalId,
       Title: options.title
       }[key];
      });
      $('body').append(content);
      var target = $('#' + modalId);
      target.find('.modal-body').load(options.url);
      if (options.onReady())
       options.onReady.call(target);
      target.modal();
      target.on('shown.bs.modal', function (e) {
       if (options.onReady(e))
       options.onReady.call(target, e);
      });
      target.on('hide.bs.modal', function (e) {
       $('body').find(target).remove();
      });
      }
     }
     }();
    })(jQuery);

    不了解组件封装的朋友可以先看看相关文章。这里我们的确认取消提示框主要用到了confirm这个属性对应的方法。还是来看看如何调用吧:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    //注册删除按钮的事件
    $("#btn_delete").click(function () {
     //取表格的选中行数据
     var arrselections = $("#tb_departments").bootstrapTable('getSelections');
     if (arrselections.length <= 0) {
     toastr.warning('请选择有效数据');
     return;
     }
     
     Ewin.confirm({ message: "确认要删除选择的数据吗?" }).on(function (e) {
     if (!e) {
      return;
     }
     $.ajax({
      type: "post"