jquery dynamically generated two-dimensional code image, click centered show big picture

The first step: the introduction of plug-ins

<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script> 
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

Part II: Write a div

<div id="qrcode"></div>

The third step: loaded when the page is loaded this:

$ () READY (function () {. 
       $ ( ' #qrcode ' ) .qrcode ({ 
                the render: " Canvas " , // set the rendering mode (two ways table and canvas, default Canvas)   
                width: 200 is , / / width 
                height: 200 is , // height 
                correctLevel: 0 , // the error correction level   
                text: " https://i.cnblogs.com/EditPosts.aspx?postid=11116934 " , // generate a two-dimensional code text 
                background: " # 00FF00" , // background color 
                foreground: " # FFFF00 " , // foreground 
            }); 
});

Part IV: Click to enlarge

<div class="" data-toggle="modal" data-target="#myModal"   onclick="showZhuCeBig();">
    查看大图
</div>

Step Five: modal box (with a large two-dimensional code image)

<!-- 模态框（Modal） -->
<div class="modal 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" onclick="closed()">
                    &times;
                </button>
            </div>
            <div class="modal-body">
              <div style="margin:0 auto;width:250px;"  id="zhuce_big"></div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

Other: View large map method, method Close map

    
        // close the big picture, while the empty loading pictures, otherwise there is the second time the two 
            function Closed () { 
               $ ( " #zhuce_big " ) .empty (); 
            } 
        // larger view 
            function showZhuCeBig () {
                 var renderStr;
                 IF (the window.applicationCache) { 
                    renderStr = ' Canvas ' ; 
                } 
                the else { 
                    renderStr = ' Image ' ; 
                } 
                $ ( ' #zhuce_big ').qrcode({
                render: renderStr,
                    width: 250, //宽度
                    height:250, //高度
                    text:"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxea55d4415b611ff9&redirect_uri=http://www.dingdongzq.com/ddzq/wxlogin/toOpenId?storeId=${currentStore.id}&response_type=code&scope=snsapi_base"
                });
            }

Modal center block codes, placed directly. Js just fine to let

    $ (function () {
                 // DOM loaded 
                var $ m_btn = $ ( ' #modalBtn ' );
                 var $ Modal = $ ( ' #myModal ' ); 
                $ m_btn.on ( ' the Click ' , function () { 
                  $ Modal .modal ({Backdrop: ' static ' }); 
                }); 
        
                // test bootstrap center 
                $ modal.on ( ' show.bs.modal ' , function () {
                   var $ the this = $ ( the this);
                   Var $ = $ modal_dialog the this .find ( ' .modal-Dialog ' );
                   // critical code, such as the modal not set Block, the $ modala_dialog.height () is zero 
                  $ the this .css ( ' the display ' , ' Block ' ); 
                  $ modal_dialog.css ({ ' margin-Top ' : Math.max ( 0 , ($ (window) .height () - $ modal_dialog.height ()) / 2 )}); 
                }); 
        
          } );