<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="modal" data-target="#modal_sidebar"> <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="#">Brand</a> <p class="navbar-text hidden-xs hidden-sm">Don't forget to check it out in mobile view </p> <p class="navbar-text visible-xs visible-sm">Thanks for rate</p> </div> <ul class="nav navbar-nav navbar-right hidden-xs"> <li> <a href="#modal_sidebar" data-toggle="modal"><span class="glyphicon glyphicon-new-window"></span></a> </li> </ul> </div> </nav> <div class="container"> <div class="row"> <div class="jumbotron"> <h1>Modal sidebar</h1> <P CLASS="LEAD">whith changed fade effect</P> <!-- Split button --> <div class="btn-group"> <button type="button" class="btn btn-danger">Click icon for demo</button> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal_sidebar"> <span class="glyphicon glyphicon-fullscreen"></span> </button> </div> </div> </div> </div> <div class="modal fade-scale" id="modal_sidebar"> <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">Modal title</h4> </div> <div class="modal-body"> <ul class="list-group"> <li class="list-group-item">Item list</li> <li class="list-group-item">Item list</li> <li class="list-group-item">Item list</li> <li class="list-group-item">Item list</li> <li class="list-group-item">Item list</li> <li class="list-group-item">Item list</li> <li class="list-group-item">Item list</li> <li class="list-group-item">Item list</li> <li class="list-group-item">Item list</li> <li class="list-group-item">Item list</li> <li class="list-group-item">Item list</li> <li class="list-group-item">Item list</li> <li class="list-group-item">Item list</li> <li class="list-group-item">Item list</li> <li class="list-group-item">Item list</li> <li class="list-group-item">Item list</li> </ul> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->

.modal-dialog{ margin:0; position: fixed; top:0; bottom:0; right:auto; background: #fff; width:60%; overflow-y: auto; } .modal-content{ border:none; background: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius:0; } .fade-scale { transform: scale(1,0); /* scale(0); horizontal*/ opacity: 0; -webkit-transition: all .25s linear; -o-transition: all .25s linear; transition: all .25s linear; } /*FOR BOOTSTRAP 3 just chengr class .show to .in*/ /* .fade-scale.in { opacity: 1; transform: scale(1,1); } */ .fade-scale.show { opacity: 1; transform: scale(1,1); /* scale(1); horizontal*/ }