insight-plugin-verifier
Version:
Insight-verifier
138 lines (136 loc) • 4.82 kB
HTML
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="robots" content="all"/>
<meta name="author" content="RZccccccc"/>
<meta name="Copyright" content="Insight"/>
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
<title>公用弹窗插件测试</title>
<link href="css/common.css" rel="stylesheet"/>
<style>
.part1{
position: absolute;
left: .5rem;
top: .5rem;
width: 1.6rem;
height: .6rem;
background-color: pink;
}
.choose .chu{
width: 1.6rem;
height: .6rem;
background-color: pink;
}
.choose{
position: absolute;
left: .5rem;
top: 1.5rem;
width: 5.6rem;
height: 5.6rem;
display: none;
}
.choose div{
width: 100%;
margin-top: .3rem;
}
.choose input{height: .35rem;}
#mydia{
background: url('http://h5.intech.gdinsight.com/plugin/demo/img/dialog_bg.png') no-repeat;
background-size: 100% 100%;
}
.cloos{
width: .36rem;
height: .36rem;
position: absolute;
right: .5rem;
top: -.5rem;
background: url('http://h5.intech.gdinsight.com/plugin/demo/img/cancel.png') no-repeat;
background-size: 100% 100%;
}
</style>
<!-- 页面设计：cp | 页面制作：cp | 创建：2018-12-13 -->
<script>
var defaultFontSize = 0;
(function(){
var d = window.document.createElement('div');
d.style.width = '1rem';
d.style.display = "none";
var head = window.document.getElementsByTagName('head')[0];
head.appendChild(d);
defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
d.remove();
var _cWidth = innerWidth;
var _cHeight = innerHeight;
var delayAdapterTimer;
var adapterLinstener = setInterval(function(){
if(_cWidth == innerWidth || _cHeight == innerHeight ){
return;
}else{
_cWidth = innerWidth;
_cHeight = innerHeight;
}
clearTimeout(delayAdapterTimer);
delayAdapterTimer = setTimeout(function(){
resize();
}, 80);
},80);
resize(true);
function resize(bol) {
var html = document.documentElement;
var designWidth = 750;
var rem2px = 100;
document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
if(typeof adapterChatroom == "function") adapterChatroom();
}
})();
</script>
</head>
<body>
<img src="http://h5.intech.gdinsight.com/gq_car/a20181122biyadi/share/img/p1_bg.jpg" style="width: 100%;height: 100%;">
<div id="mydia">
我就是弹窗元素
<div>弹窗里面内容随意写</div>
</div>
<div class="part1">点我出弹窗</div>
<div class="choose">
<div><span>弹窗宽度(数值):</span><input type="text" class="dia_w"></div>
<div><span>弹窗高度(数值):</span><input type="text" class="dia_h"></div>
<div><span>弹窗蒙层透明度(数值):</span><input type="text" class="opa"></div>
<div><span>点击空白区域关闭弹窗:</span><input type="radio" class="touchClose"></div>
<div><span>开启关闭按钮:</span><input type="radio" class="clob"></div>
<div class="chu">点我初始化</div>
</div>
</body>
<script src="js/zepto.js"></script>
<script src="http://h5.intech.gdinsight.com/plugin/dialog.js"></script>
<script>
var dia1;
$(".part1").click(function(){
dia1.showDialog();
})
dia1 = new Dialog({
el:"mydia",
opacity:0.5, //蒙层透明度：0-1; 默认：1;
width:598, //宽度，单位：px; 元素高宽度; 默认：500;
height:338, //高度，单位：px; 元素高度; 默认：500;
touchClose:true, //点击空白区域关闭弹窗; 默认：false;
closeBtn:true, //开启关闭按钮; 默认：false;
closeEle:"cloos"
});
// $(".chu").click(function(){
// dia1 = new Dialog({
// el:"mydia",
// opacity:$(".opa").val(), //蒙层透明度：0-1; 默认：1;
// width:$(".dia_w").val(), //宽度，单位：px; 元素高宽度; 默认：500;
// height:$(".dia_h").val(), //高度，单位：px; 元素高度; 默认：500;
// touchClose:$(".touchClose").prop("checked"), //点击空白区域关闭弹窗; 默认：false;
// closeBtn:$(".clob").prop("checked"), //开启关闭按钮; 默认：false;
// closeEle:"cloos"
// });
// $(".choose").remove();
// $(".part1").show();
// })
</script>
</html>