前端：弹出框

1.代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>LIGHTBOX EXAMPLE</title>  
<style>  
* {  
 margin:0;  
 padding:0  
}  
html, body {  
 height: 100%;  
 width: 100%;  
 font-size:12px  
}  
.white_content {  
 display: none;  
 position: absolute;  
 top: 25%;  
 left: 25%;  
 width: 50%;  
 padding: 6px 16px;  
 border: 12px solid #6ec673;  
 background-color: white;  
 z-index:1002;  
 overflow: auto;  
}  
.black_overlay {  
 display: none;  
 position: absolute;  
 top: 0%;  
 left: 0%;  
 width: 100%;  
 height: 100%;  
 background-color:#f5f5f5;  
 z-index:1001;  
 -moz-opacity: 0.8;  
 opacity:.80;  
 filter: alpha(opacity=80);  
}  
.close {  
 float:right;  
 clear:both;  
 width:100%;  
 text-align:right;  
 margin:0 0 6px 0  
}  
.close a {  
 color:#333;  
 text-decoration:none;  
 font-size:14px;  
 font-weight:700  
}  
.con {  
 text-indent:1.5pc;  
 line-height:21px  
}  
</style>  
<script>  
function show(tag){  
 var light=document.getElementById(tag);  
 var fade=document.getElementById('fade');  
 light.style.display='block';  
 fade.style.display='block';  
 }  
function hide(tag){  
 var light=document.getElementById(tag);  
 var fade=document.getElementById('fade');  
 light.style.display='none';  
 fade.style.display='none';  
}  
</script>  
</head>  
<body>  
<a href="javascript:void(0)" onclick="show('light')">打开1</a>  
<a href="javascript:void(0)" onclick="show('light2')">打开2</a>  
<div id="light" class="white_content">  
      <div class="close"><a href="javascript:void(0)" onclick="hide('light')"> 关闭</a></div>  
      <div class="con">   
      内容1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容   
      </div>  
</div>  
<div id="light2" class="white_content">  
      <div class="close"><a href="javascript:void(0)" onclick="hide('light2')"> 关闭</a></div>  
      <div class="con">   
      内容2   
      </div>  
</div>  
<div id="fade" class="black_overlay"></div>  
</body>  
</html>
2.json格式化显示
  • 样式
<style>
    pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
    .string { color: green; }
    .number { color: darkorange; }
    .boolean { color: blue; }
    .null { color: magenta; }
    .key { color: red; }
</style>
  • js代码
function syntaxHighlight(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 2);
    }
    json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}
  • 使用
<pre id="result">

</pre>


//jsonStr = JSON.stringify(res, null, 2); //res是要JSON化的对象，2是spacing

$('#result').html(syntaxHighlight(res)); //res是json object

　　

3.效果

 

posted @ 2018-05-15 10:50  桃源仙居  阅读(156)  评论(0)    收藏  举报