<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit"> 
  <title>kesion前端弹窗封装</title>
  <link href="/ks_inc/popup/css/kesion.popup.css" rel="stylesheet">
  <style>
	*{margin:0px;padding:0px;word-break: break-all;word-wrap: break-word;}
	li,ul{ list-style:none;}
	body{ font-size: 12px;color:#34495e;font-family:'microsoft yahei ui','microsoft yahei',simsun,sans-serif;}
    button{font-family:'microsoft yahei ui','microsoft yahei',simsun,sans-serif;}
	a{text-decoration:none;color:#34495e;}
	.clear{ clear:both; overflow:hidden;}
	.clearfix{overflow:hidden;_zoom:1;}
	.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
	.container{padding:80px 120px;}
	.blank60{height:60px;}
  	h1{ font-size:30px;margin-top:50px;font-weight:normal;color:#00b38a; position:relative;height:70px; line-height:70px;}
	h1 span{color:#929292; font-size:24px; padding-left:10px;}
	h1 .line{width:60px;height:2px; background:#00b38a; position:absolute;bottom:0;left:0;}
	.f-l{ float:left;}
	.info{ line-height:34px; font-size:14px; padding:20px; margin:30px 0px; background:#f9f9f9;}
	.info h4{ font-size:14px; line-height:34px;}
    .info font{color:#03a37e;}
	.title{ font-size:36px; font-weight:bold;height:36px; line-height:36px;}
	.title em{ font-style:normal; font-size:16px;color:#929292; background:#00b38a; color:#fff;border-radius:4px;border-radius:3px; float:left; padding:0px 20px;}

    .button{width:100px;height:36px;line-height: 36px;border:1px solid #ebebeb;border-bottom:1px solid #dbdbdb; text-align:center;background:#fff;border-radius:3px;margin:20px 0;cursor: pointer; box-shadow: 0 1px 3px #e3e3e3; transition: .3s;}
    .button:hover{background:#f9f9f9;}
    .tips{color:#9ba7b4;margin-left:30px;}

  </style>
    
</head>
<body>
   
<div class="container">
 
    <div class="title"><span class="f-l">kesion.popup</span><em>version1.0</em></div>
   
    <div class="name"><h1>文件引用<i class="line"></i></h1></div>
    <div class="info">
    	<h4>引用以下文件：</h4>
        <span>&lt;</span>link href="<font>/ks_inc/popup/css/kesion.popup.css</font>" rel="stylesheet"><br /><span>&lt;</span>script src="<font>/ks_inc/popup/js/kesion.popup.js</font>"><span>&lt;</span>/script>
       
    </div>

    <div class="name"><h1>效果演示<i class="line"></i></h1></div>
    <div class="info">
        <h4>关闭当前窗口</h4>
        closePopup(<font>window.name</font>);
        
        <h4>关闭父亲窗口</h4>
        parent.closePopup(<font>window.name</font>);
     </div>




        <!-----------------tips---------------------->
       
       <div class="info">
            <h4>信息提示：</h4>
            <div class="button" id="tips">tips</div>
            popup.tips({<br />
                &nbsp;  &nbsp; title:'<font>这是一条信息提示</font>',<br />
            });<br />
        

        </div>

        <!-----------------confrim---------------------->

        <div class="info">
            <h4>confirm：</h4>
            <div class="button" id="confirm">confirm</div>
            popup.confirm({ <br /> 
              &nbsp;  &nbsp; title:'<font>这是一个confirm弹出层</font>',  <br />              
              &nbsp;  &nbsp; yes:function(){ <br />          
                &nbsp;  &nbsp; &nbsp;  &nbsp;  alert('<font>这里可写确定之后的执行函数</font>'); <br />          
              &nbsp;  &nbsp; },<br />
              &nbsp;  &nbsp; no:function(){ <br />          
                &nbsp;  &nbsp; &nbsp;  &nbsp;  alert('<font>这里可写取消之后的执行函数</font>'); <br />          
              &nbsp;  &nbsp; }<br />
            });
        
        
            
        </div>
        <!-----------------open---------------------->

        <div class="info">
            <h4>打开窗口：</h4>
            <div class="button" id="open">open</div>
            popup.open({<br /> 
              &nbsp;  &nbsp; title:'<font>编辑Html元素</font>',   <span class="tips">//窗口标题</span><br />
              &nbsp;  &nbsp; area: ['<font>900</font>', '<font>540</font>'], <span class="tips">//窗口大小  宽×高</span><br /> 
              &nbsp;  &nbsp; drag:<font>true</font>, <span class="tips">//是否支持拖动</span><br /> 
              &nbsp;  &nbsp; shade:<font>0.2</font>, <span class="tips">//灰色遮罩层透明度</span><br /> 
              &nbsp;  &nbsp; scrollbar:<font>false</font>,<span class="tips">//是否允许页面滚动</span><br /> 
              &nbsp;  &nbsp; url:'<font>http://www.kesion.com</font>',<span class="tips">//指向链接</span><br /> 
              &nbsp;  &nbsp;  &nbsp;  &nbsp; console.log('<font>这里可写关闭的执行函数</font>')<span class="tips">//关闭窗口后执行</span><br /> 
              &nbsp;  &nbsp; }<br /> 
            });
                        
        
            
        </div>

        <!-----------------close---------------------->

</div>        

<script src="/ks_inc/jquery.js"></script>
<script src="/ks_inc/popup/js/kesion.popup.js"></script>
<script>
   $('#tips').click(function(){
        popup.tips({
            title:'这是一条信息提示',
        });
   });

   $('#confirm').click(function(){
        popup.confirm({ 
            title:'这是一个confirm弹出层', 
            yes:function(){ 
                alert('这里可写确定之后的执行函数');
            },
            no:function(){ 
              alert('这里可写取消之后的执行函数'); 
            }
        });
   });

   $('#open').click(function(){
    var dom = $('#text')
    popup.open({
        title:'编辑Html元素', //窗口标题
        area: ['900', '540'], //窗口大小 宽×高
        drag:true, //是否支持拖动
        shade:0.2, //灰色遮罩层透明度
        scrollbar:false,//是否允许页面滚动
        url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505733518217&di=0b863c6b92a976f4053c87e49bf0b90a&imgtype=0&src=http%3A%2F%2Fwww.runyiphoto.com%2Fuploads%2F2017%2F0519%2Fac61291bbe6a95873af3e27a0aa225c0.jpg',//指向链接
        close:function(){
            
        }
    });
});

  
</script>

</body>
</html>






