.button-code{
        background-color: #ffffff;
        width: 115px;
        height: 35px;
        border: 1px solid #32a9ff;
        color: #32a9ff;
        margin-right: 50px;
    }

    .code-frame{
        -webkit-transform: translateX(0%) translateY(-50%);
        -moz-transform: translateX(0%) translateY(-50%);
        -ms-transform: translateX(0%) translateY(-50%);
        transform: translateX(0%) translateY(-50%);
        background-color: #ffffff;
        display: none;
        width: 520px;
        top: 50%;
        left: 0px;
        right: 0px;
        margin: 0 auto;
        position: fixed;
        padding-top: 40px;
        border-radius: 8px;
        z-index: 3;
    }
    .qrcode_screen{
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #000000;
        opacity: 0.3;
        -moz-opacity: 0.3;
        filter:alpha(opacity=50);
    
 

html 

<button class="button-code code">生成二維碼</button>

<div class="code-frame">
    <img class="close-code" style="position: absolute;right: 10px;top: 10px;" src="<?=\Asset::a('images/close.png')?>">
    <h1 id="h1-code" style="text-align: center; font-size: 20px;"><?=$product['name']?></h1>
    <img id="code-img" style="width: 150px; padding-top: 20px; margin: 0 auto; padding-bottom: 30px;" src="<?= $qrcodeUrl;?>">
    <a href="/merchant/insurance/downloadImage?url=<?= $qrcodeUrl;?>"><input type="button" value="儲存圖片" style="margin-left: 98px;" class="btn w324 btn-add_product"></a>
    <p style="color: #666; text-align: center; margin-top:15px; margin-bottom: 35px;">通過此二維碼投保的使用者，可在保單管理中進行查詢
    </p>
</div>
<div class="qrcode_screen"></div>
 

JS 

       $(".code").on('click', function(){
            $(".code-frame").show();
            $(".qrcode_screen").show();
        });
        $(".w324").on('click', function(){
            $(".code-frame").hide();
            $(".qrcode_screen").hide();
        });
        $(".close-code").on('click', function(){
            $(".code-frame").hide();
            $(".qrcode_screen").hide();
        });


        $(".button-code").hover(function(){
            $(this).css("background-color", "#32a9ff");
            $(this).css("color", "#FFFFFF");
        },function(){
            $(this).css("background-color", "#FFFFFF");
            $(this).css("color", "#32a9ff");
        });
 

php

    //H5端二維碼圖片下載
    public function downloadImageAction(){
        $url = $this->getQuery('url');//圖片連結
        $mime = 'application/force-download';
        header('Pragma: public'); // required
        header('Expires: 0'); // no cache
        header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
        header('Cache-Control: private',false);
        header('Content-Type: '.$mime);
        $filename = time().rand(1000,9999).'.png';
        header('Content-Disposition: attachment; filename='.$filename);
        header('Content-Transfer-Encoding: binary');
        header('Connection: close');
        readfile($url); // push it out
        exit();
    }