超简单模态框

复制全部到一个html文件执行便可

<link rel="stylesheet" href="https://rss.i6yun.com/lib/bootstrap/dist/css/bootstrap.css" type="text/css" />
<script src="https://rss.i6yun.com/lib/jquery/dist/jquery.min.js"></script>
<script src="https://rss.i6yun.com/lib/bootstrap/dist/js/bootstrap.js"></script>
<a href="#" onClick="UnAuthUser()">点击我</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog" style="width:60%;height:50%;">
       <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 class="radio">
                   <label>
                       <input type="radio" name="optionsRadios" id="optionsRadios1" value="1" checked> 刚强
                   </label>
               </div>
               <div class="radio">
                   <label>
                       <input type="radio" name="optionsRadios" id="optionsRadios2" value="2">可爱
                   </label>
               </div>
           </div>
           <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">
                   取消
               </button>
               <button type="button" class="btn btn-primary" id="sumbit">
                   提交
               </button>
           </div>
       </div><!-- /.modal-content -->
   </div><!-- /.modal -->
</div>
<script>
   function UnAuthUser(Id, GeneratorId) {
       //显示模态框
       $('#myModal').modal('show');
       //模态框居中
       $('#myModal').on('show.bs.modal', function () {
           var $this = $(this);
           var $modal_dialog = $this.find('.modal-dialog');
           $this.css('display', 'block');
           $modal_dialog.css({ 'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });

       });
       $("#myModal").modal({ backdrop: false, keyboard: false });
   }
</script>

也可以进我公众号获取更多的源码哦