jquery动态生成二维码图片，点击居中展示大图

第一步：引入插件

<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>

第二部：写个div

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

第三步：在页面加载完成的时候加载这段：

 $().ready(function() {
       $('#qrcode').qrcode({
                render:"canvas",//设置渲染方式 （有两种方式 table和canvas，默认是canvas）  
                width: 200,//宽度
                height: 200,//高度
                correctLevel:0,//纠错等级  
                text: "https://i.cnblogs.com/EditPosts.aspx?postid=11116934",//生成二维码的文本
                background:"#00FF00",//背景色
                foreground:"#FFFF00",//前景色
            });
});

第四部：点击查看大图

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

第五步：模态框（装二维码大图）

<!-- 模态框（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" οnclick="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>

其他：查看大图方法，关闭大图方法

    
        //关闭大图，同时清空加载的图片，否则第二次就有两张了
            function closed(){
               $("#zhuce_big").empty();
            }
        //查看大图
            function showZhuCeBig(){
                var renderStr;
                if (window.applicationCache) {
                    renderStr = 'canvas';
                }
                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"
                });
            }

模态框居中代码，直接放。让到js中就好

    $(function(){
                // dom加载完毕
                var $m_btn = $('#modalBtn');
                var $modal = $('#myModal');
                $m_btn.on('click', function(){
                  $modal.modal({backdrop: 'static'});
                });
        
                // 测试 bootstrap 居中
                $modal.on('show.bs.modal', function(){
                  var $this = $(this);
                  var $modal_dialog = $this.find('.modal-dialog');
                  // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
                  $this.css('display', 'block');
                  $modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });
                });
        
          });

 

转载于:https://www.cnblogs.com/longsanshi/p/11278670.html