Bootstrap Snippet AddUser-wizard using HTML CSS Bootstrap Javascript

"AddUser-wizard"
Bootstrap 3.2.0 Snippet by haoHu

3.2.0 user

5.3K 2 Fav

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>  <div class="modal fade account-modal in" id="step1" data-backdrop="true" aria-hidden="false" style="display:block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">创建账号</h4> </div> <div class="modal-body"> <h3>子账号信息</h3> <form class="form-horizontal form-feedback-out " role="form" > <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">子账号名</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">用户姓名</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <label form="" class="col-sm-3 control-label">用户备注</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">邮箱地址</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">子账号状态</label> <div class="col-sm-5"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-success active"> <input type="radio" name="status" autocomplete="off" checked />启用 </label> <label class="btn btn-default"> <input type="radio" name="status" autocomplete="off" checked />停用 </label> </div> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-act" name="cancel">取消</button> <button type="button" class="btn btn-warning btn-act" name="next">下一步</button> </div> </div> </div> </div> <div class="modal fade account-modal in" id="step2" data-backdrop="true" aria-hidden="false" style="display:block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">创建账号</h4> </div> <div class="modal-body"> <h3>子账号密码</h3> <form class="form-horizontal form-feedback-out " role="form" > <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">子账号名</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" disabled value="董卓" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">重置密码</label> <div class="col-sm-5"> <input type="password" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label"></label> <div class="col-sm-5"> <input type="checkbox" value="1" />显示明文 </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-act" name="cancel">取消</button> <button type="button" class="btn btn-info btn-act" name="prev">上一步</button> <button type="button" class="btn btn-warning btn-act" name="next">下一步</button> </div> </div> </div> </div> <div class="modal fade account-modal in" id="step3" data-backdrop="true" aria-hidden="false" style="display:block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">创建账号</h4> </div> <div class="modal-body"> <h3>子账号角色权限</h3> <form class="form-horizontal form-feedback-out " role="form" > <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">子账号名</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" disabled value="董卓" /> </div> </div> <div class="form-group has-feedback"> <label form="" class=" col-sm-3 control-label">请选择角色权限</label> </div> <div class="form-group has-feedback"> <div class="col-sm-offset-3 col-sm-8"> <dl> <dt class="checkbox"> <label class=""><input type="checkbox" value=1 />店长</label> <a class="btn btn-link btn-bind" role="shop">绑定店铺</a> </dt> <dd> 可以管理单店的信息和功能 </dd> <dt> <label ><input type="checkbox" value=1 />财务</label> <a class="btn btn-link btn-bind" role="account">绑定账号</a> </dt> <dd> 可以管理多个结算账户 </dd> <dt> <label ><input type="checkbox" value=1 />区域经理</label> <a class="btn btn-link btn-bind" role="regional">绑定店铺</a> </dt> <dd> 可以开店，并管理多个店铺的基本信息和功能 </dd> <dt><label ><input type="checkbox" value=1 />集团经理</label></dt> <dd> 管理所有店铺信息和功能及结算数据 </dd> <dt><label ><input type="checkbox" value=1 />系统管理员</label></dt> <dd> 超级管理员，全部权限 </dd> </dl> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-act" name="cancel">取消</button> <button type="button" class="btn btn-info btn-act" name="prev">上一步</button> <button type="button" class="btn btn-warning btn-act" name="save">保存</button> </div> </div> </div> </div> <div class="modal fade bind-modal in" id="bind_single_shop" data-backdrop="true" aria-hidden="false" style="display:none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">选择所辖管理店铺</h4> </div> <div class="modal-body"> <p>选择店长所管辖店铺</p> <div class="shop-query"> <div class="filter"> <div class="city"> <span class="">城市：</span> <a class="btn btn-link disabled">全部</a> <a class="btn btn-link ">北京<i class="num">(10)</i></a> <a class="btn btn-link">上海</a> <a class="btn btn-link">广州</a> <a class="btn btn-link">重庆</a> <a class="btn btn-link">深圳</a> <a class="btn btn-link">柳州</a> <a class="btn btn-link">天津</a> </div> <div class="area"> <span class="">区域：</span> <a class="btn btn-link disabled">全部</a> <a class="btn btn-link">海淀</a> <a class="btn btn-link">朝阳</a> <a class="btn btn-link">大兴</a> <a class="btn btn-link">回龙观</a> <a class="btn btn-link">昌平</a> <a class="btn btn-link">龙泽</a> <a class="btn btn-link">顺义</a> </div> </div> <nav class="navbar navbar-default query" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#shop_query"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="javascript:void(0);">查询店铺</a> </div> <div class="collapse navbar-collapse" id="shop_query"> <div class="navbar-form navbar-left" role="search"> <div class="input-group"> <input type="text" class="form-control" autocomplete="off" /> <span class="input-group-btn"> <button class="btn btn-default">查询</button> </span> </div> </div> </div> </div> </nav> </div> <div class="shop-list row"> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el" title="店铺111122222"/>店铺111122222</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺111133333</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺1111444</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺111155555555</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺1111123123</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺11112332323</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺1111aaaeqr</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺1111qwerqwr</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺1111</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺111wqe1</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺1111</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺1111</label> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-act1" name="cancel">取消</button> <button type="button" class="btn btn-warning btn-act1" name="save">绑定</button> </div> </div> </div> </div> <div class="modal fade bind-modal in" id="bind_account" data-backdrop="true" aria-hidden="false" style="display:none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">选择绑定结算账户</h4> </div> <div class="modal-body"> <p>选择绑定结算账户</p> <div class="shop-list row"> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el" title="店铺111122222"/>店铺111122222</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺111133333</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺1111444</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺111155555555</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺1111123123</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺11112332323</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺1111aaaeqr</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺1111qwerqwr</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺1111</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺111wqe1</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺1111</label> </div> <div class="col-sm-6 col-md-4"> <label><input type="radio" name="shop_el"/>店铺1111</label> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-act1" name="cancel">取消</button> <button type="button" class="btn btn-warning btn-act1" name="save">绑定</button> </div> </div> </div> </div>  <div class="modal fade bind-modal in" id="bind_multiple_shop" data-backdrop="true" aria-hidden="false" style="display:none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">选择绑定店铺</h4> </div> <div class="modal-body"> <p>选择区域经理绑定店铺</p> <div class="shop-query"> </div> <div class=" row"> <ul class="tree col-sm-12 "> <li class="node"> <div class="node-head "> <a href="#" class="btn btn-link"> <span class="glyphicon glyphicon-chevron-up"></span> </a> <div class="checkbox"> <label class="control-label"> <input type="checkbox" value="1" name="city" /> 城市1 </label> </div> </div> <div class="node-body"> <ul class="row"> <li class="node"> <div class="node-head "> <a href="#" class="btn btn-link"> <span class="glyphicon glyphicon-chevron-up"></span> </a> <div class="checkbox"> <label class="control-label"> <input type="checkbox" value="1" name="area" /> 区域1 </label> </div> </div> <div class="node-body"> <ul class="row"> <li class="node col-sm-4"> <div class="node-head checkbox"> <label class="control-label"> <input type="checkbox" value="1" name="shop" /> 店铺1 </label> </div> </li> <li class="node col-sm-4"> <div class="node-head checkbox"> <label class="control-label"> <input type="checkbox" value="1" name="shop" /> 店铺1 </label> </div> </li> <li class="node col-sm-4"> <div class="node-head checkbox"> <label class="control-label"> <input type="checkbox" value="1" name="shop" /> 店铺1 </label> </div> </li> <li class="node col-sm-4"> <div class="node-head checkbox"> <label class="control-label"> <input type="checkbox" value="1" name="shop" /> 店铺1 </label> </div> </li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-act1" name="cancel">取消</button> <button type="button" class="btn btn-warning btn-act1" name="save">绑定</button> </div> </div> </div> </div>

.chosen-item {display:inline-block; margin-right:1rem;} .shop-list li {display:inline-block; margin-right : 1rem;}

$('.account-modal').hide(); $('.account-modal[id=step1]').show(); $('.btn.btn-act').on('click', function (e) { var $this = $(this), act = $this.attr('name'); var $modal = $this.parents('.account-modal'); $('.account-modal').hide(); if ($modal.attr('id') == 'step1' && act == "next") { $('.account-modal[id=step2]').show(); } if ($modal.attr('id') == 'step2' && act == "next") { $('.account-modal[id=step3]').show(); } if ($modal.attr('id') == 'step2' && act == "prev") { $('.account-modal[id=step1]').show(); } if ($modal.attr('id') == 'step3' && act == "prev") { $('.account-modal[id=step2]').show(); } if (act == 'save') { alert("保存成功"); } }); $('.btn.btn-act1').on('click', function (e) { var $this = $(this), act = $this.attr('name'); var $modal = $this.parents('.bind-modal'); $modal.hide(); }); $('.btn-bind').on('click', function (e) { var $this = $(this), role = $this.attr('role'); console.info(role); // $this.popover({ // animation : true, // content : 'adfafasfasfaf' // }); if (role == "shop") { $('#bind_single_shop').show(); } else if (role == "account") { $('#bind_account').show(); } else if (role == "regional") { $('#bind_multiple_shop').show(); } }); /* $('.panel-collapse').on('hide.bs.collapse', function () { console.info(this); var $this = $(this), id = $this.attr('id'), toggleEl = $('#accordion').find('[href=#'+ id + ']'); toggleEl.find('.glyphicon').removeClass().addClass('glyphicon glyphicon-chevron-down'); }); $('.panel-collapse').on('show.bs.collapse', function () { console.info(this); var $this = $(this), id = $this.attr('id'), toggleEl = $('#accordion').find('[href=#'+ id + ']'); toggleEl.find('.glyphicon').removeClass().addClass('glyphicon glyphicon-chevron-up'); console.info($('#accordion').find('.panel-collapse[id!=' + id + ']').filter(function () {return !$(this).hasClass('in')})); $('#accordion').find('.panel-collapse[id!=' + id + ']').filter(function ( ) { return $(this).hasClass('in'); }).collapse('hide'); }); */

Related: See More

Paper Kit 2 Angular

Paper Kit 2 Angular

Form wizard (using tabs)

Form wizard (using tabs)

Bootstrap Material Wizard

Bootstrap Material Wizard

Form Wizard and validation

Form Wizard and validation

Questions / Comments:

Posting GuidelinesFormatting