Bootstrap Modal 从左侧和右侧滑入

在web开发中，添加、修改操作，用modal弹出层是一种不错的选择。
但是modal弹出层，默认动画效果从顶端滑入，从左侧或右侧滑入也是一种不错的选择。

展示效果如下：

右侧划入代码，class="modal right fade"
左侧划入代码，class="modal left fade"

JS显示或隐藏modal：

//显示
$('#myModal').modal('show')

//隐藏
$('#myModal').modal('hide')

html代码

<!--css样式-->
		<style type="text/css">
		.modal.left .modal-dialog,.modal.right .modal-dialog{position:fixed;margin:auto;width:320px;height:100%;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
        .modal.left .modal-content,.modal.right .modal-content{height:100%;overflow-y:auto}
        .modal.left .modal-body,.modal.right .modal-body{padding:15px 15px 80px}
        .modal.left.fade .modal-dialog{left:-320px;-webkit-transition:opacity .3s linear,left .3s ease-out;-moz-transition:opacity .3s linear,left .3s ease-out;-o-transition:opacity .3s linear,left .3s ease-out;transition:opacity .3s linear,left .3s ease-out}
        .modal.left.fade.in .modal-dialog{left:0}
        .modal.right.fade .modal-dialog{right:-320px;-webkit-transition:opacity .3s linear,right .3s ease-out;-moz-transition:opacity .3s linear,right .3s ease-out;-o-transition:opacity .3s linear,right .3s ease-out;transition:opacity .3s linear,right .3s ease-out}
        .modal.right.fade.in .modal-dialog{right:0}
        .modal-content{border-radius:0;border:none}
        .modal-header{border-bottom-color:#eee;background-color:#fafafa}

		</style>
		<!--点击右侧弹出-->
		<a href="javascript:;" class="btn btn-danger mybtn" data-toggle="modal" data-target="#myModal"><span>打开弹窗</span></a>
		<!-- 弹出层 modal -->
        <div class="modal right 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">&times;</button>                
                <h4 class="modal-title" id="myModalLabel">弹窗标题</h4>
              </div>
              <div class="modal-body">
                    弹窗内容	
              </div>
            </div>
          </div>
        </div>
		<!-- end 弹出层 moda -->

 

感谢您的支持，写的文章如对您有所帮助，开源不易，请您打赏，谢谢啦~