bootstrap 模态框生成标签页

来源：互联网发布：saas模式软件编辑：程序博客网时间：2024/05/24 01:07

1，先补充bootstrap标签页的设置方式

参考文章：点击打开链接

2，模态框实现代码（为了方便直接使用项目代码，所以很多代码不用细看，只需看标签列表在模态框中的位置就可以了。）

<div class="modal fade" id="passwordModal" tabindex="-1" role="dialog"aria-labelledby="passwordModalLabel" 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"><i class="fa fa-times" style="color: red;"></i></button><h4 class="modal-title" id="passwordModalLabel">我的设置</h4></div><div class="modal-body"><ul class="nav nav-tabs" role="tablist">    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">修改我的资料</a></li>    <li><a href="#profile" data-toggle="tab">Profile</a></li></ul>  <!-- Tab panes -->  <div class="tab-content">    <div role="tabpanel" class="tab-pane active" id="home">    <form class="form-horizontal" role="form" id="user-form" style="padding: 10px" action="system/users/update.json" method="post">    <div class="form-group">    <input type="hidden" id="inputId" name="id">      <label class="col-sm-3 control-label">姓名：</label>      <div class="col-sm-9">         <input type="text" id="inputName" name="name" class="form-control" placeholder="请输入姓名">      </div>   </div>   <div class="form-group">      <label class="col-sm-3 control-label">手机号码：</label>      <div class="col-sm-9">         <input type="text" id="inputPhone" name="phone" class="form-control" placeholder="请输入手机号码">      </div>   </div>    <div class="form-group">      <label class="col-sm-3 control-label">邮箱：</label>      <div class="col-sm-9">         <input type="text" id="inputEmail" name="email" class="form-control" placeholder="请输入邮箱">      </div>   </div>   <div class="modal-footer"><button type="submit" class="btn btn-primary"><i class="fa fa-save"></i>保存</button><button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i>取消</button></div></form>    </div>        <div role="tabpanel" class="tab-pane" id="profile">    <form class="form-horizontal" role="form" id="user-form" style="padding: 10px" action="system/users/update.json" method="post">    <div class="form-group">    <input type="hidden" id="inputId" name="id">      <label class="col-sm-3 control-label">姓名111：</label>      <div class="col-sm-9">         <input type="text" id="inputName" name="name" class="form-control" placeholder="请输入姓名">      </div>   </div>   <div class="form-group">      <label class="col-sm-3 control-label">手机号码：</label>      <div class="col-sm-9">         <input type="text" id="inputPhone" name="phone" class="form-control" placeholder="请输入手机号码">      </div>   </div>    <div class="form-group">      <label class="col-sm-3 control-label">邮箱：</label>      <div class="col-sm-9">         <input type="text" id="inputEmail" name="email" class="form-control" placeholder="请输入邮箱">      </div>   </div>   <div class="modal-footer"><button type="submit" class="btn btn-primary"><i class="fa fa-save"></i>保存</button><button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i>取消</button></div></form>    </div>  </div></div></div></div></div><!-- /我的设置 -->

效果图：这是我后期根据这些代码实现的

2，模态框实现代码（为了方便直接使用项目代码，所以很多代码不用细看，只需看标签列表在模态框中的位置就可以了。）

0 0