分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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",//@L_801_3@二维码的文本
                BACkground:"#00FF00",//背景色
                foreground:"#FFFF00",//前景色
            });
});

第四部：点击查看大图

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

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

<!-- 模态框（Modal） -->
<div class="@H_84_8@modal fade" id="@H_84_8@mymodal" tabindex="-1" role="dialog" aria-labelledby="@H_84_8@mymodalLabel" aria-hidden="true">
    <div class="@H_84_8@modal-dialog">
        <div class="@H_84_8@modal-content">
            <div class="@H_84_8@modal-header">
                <button type="button" class="close" data-dismiss="@H_84_8@modal" aria-hidden="true" onclick="closed()">
                    &times;
                </button>
            </div>
            <div class="@H_84_8@modal-body">
              <div style="@H_84_8@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({‘@H_84_8@margin-top‘: Math.max(0,($(window).height() - $modal_dialog.height()) / 2) });
                });
        
          });