.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();
}