<commit_before><!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>cxDialog 对话框 &raquo; 在线演示 - 前端开发仓库</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<link rel="stylesheet" href="css/jquery.cxdialog.css">
<style>
body{background:#eee;font:14px/1.7 tahoma,'\5fae\8f6f\96c5\9ed1',sans-serif;}
h1,h2,h3{font-size:36px;line-height:1;}
h2{font-size:24px;}
h3{font-size:18px;}
fieldset{margin:2em 0;border-color:#ccc;}
fieldset legend{color:#888;font-size:1rem;line-height:2;}

.wrap{max-width:800px;margin:0 auto;padding:20px 40px;border-radius:5px;background-color:#fff;box-shadow:0 0 8px rgba(0,0,0,0.2);}

#prompt_box{display:none;margin:10px;padding:10px;border:2px solid #ccc;}
#prompt_box label{display:block;margin-bottom:5px;}
</style>
</head>
<body>
<div class="wrap">
  <h1>cxDialog 对话框</h1>

  <h2>示例</h2>
  <form id="example" action="javascript://" method="get">
    <fieldset>
      <legend>按钮</legend>
      <label><input type="checkbox" name="btn" value="ok"> 确认</label>
      <label><input type="checkbox" name="btn" value="no"> 取消</label>
      <label><input type="checkbox" name="buttons" value="自定义1"> 自定义1</label>
      <label><input type="checkbox" name="buttons" value="自定义2"> 自定义2</label>
      <label><input type="checkbox" name="buttons" value="自定义3"> 自定义3</label>
    </fieldset>

    <fieldset>
      <legend>背景遮罩</legend>
      <label><input type="radio" name="mask" value="" checked> 默认</label>
      <label><input type="radio" name="mask" value="not_mask"> 透明</label>
    </fieldset>

    <fieldset>
      <legend>背景遮罩是否可关闭对话框</legend>
      <label><input type="radio" name="maskClose" value="1" checked> 允许</label>
      <label><input type="radio" name="maskClose" value="0"> 禁止</label>
    </fieldset>

    <fieldset>
      <legend>主题样式</legend>
      <label><input type="radio" name="theme" value="" checked> 默认</label>
      <label><input type="radio" name="theme" value="ios"> iOS</label>
    </fieldset>

    <fieldset>
      <legend>显示对话框</legend>
      <button type="button" name="alert">模拟 alert</button>
      <button type="button" name="confirm">模拟 confirm</button>
      <button type="button" name="prompt">模拟 prompt</button>
      <p id="result_confirm"></p>
      <p id="result_prompt"></p>
    </fieldset>
  </form>

  <div id="prompt_box">
    <label for="prompt_name">您正在使用的什么浏览器？</label>
    <input id="prompt_name" type="text">
  </div>

  <a href="http://code.ciaoca.com/jquery/cxdialog/demo/">查看更多示例</a>

  <h2>文档</h2>
  <p><a target="_blank" href="https://github.com/ciaoca/cxDialog">Github</a></p>
  
  <h2>作者</h2>
  <p><a target="_blank" href="http://ciaoca.com/">Ciaoca</a></p>

  <h2>协议</h2>
  <p>Released under the MIT license</p>
</div>

<!-- <script src="http://cdn.staticfile.org/jquery/1.9.0/jquery.min.js"></script> -->
<script src="http://cdn.staticfile.org/zepto/1.1.1/zepto.min.js"></script>
<script src="js/jquery.cxdialog.js"></script>
<script>
(function() {
  var form = $('#example');
  var promptName = document.getElementById('prompt_name');

  var setOptions = function() {<commit_msg>perf demo<commit_after><!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>cxDialog 对话框 &raquo; 在线演示 - 前端开发仓库</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<link rel="stylesheet" href="css/jquery.cxdialog.css">
<style>
body{margin:0;background-color:#f0f0f0;}
h1,h2,h3{margin:1em 0;font-size:2.25rem;line-height:1;}
h2{font-size:1.5rem;}
h3{font-size:1.25rem;}

a{color:#006af9;text-decoration:none;}

.wrap{box-sizing:border-box;max-width:800px;margin:0 auto;}

header{background-color:#2d2d2d;color:#fff;}
header .wrap{padding:30px 0;}
header h1{margin:0;}

.main .wrap{padding:20px 40px;background-color:#fff;}
fieldset{margin:1em 0;border-color:#ddd;}
fieldset legend{color:#888;font-size:1rem;line-height:2;}

.about{display:flex;}
.about section{flex:1;}
.about section h2{margin-bottom:0;}
.about a:hover{opacity:0.8;}

#prompt_box{display:none;margin:10px;padding:10px;border:2px solid #ccc;}
#prompt_box label{display:block;margin-bottom:5px;}
</style>
</head>
<body>
<header>
  <div class="wrap">
    <h1>cxDialog 对话框</h1>
  </div>
</header>

<div class="main">
<div class="wrap">
  <h2>示例</h2>
  <form id="example" action="javascript://" method="get">
    <fieldset>
      <legend>按钮</legend>
      <label><input type="checkbox" name="btn" value="ok"> 确认</label>
      <label><input type="checkbox" name="btn" value="no"> 取消</label>
      <label><input type="checkbox" name="buttons" value="自定义1"> 自定义1</label>
      <label><input type="checkbox" name="buttons" value="自定义2"> 自定义2</label>
      <label><input type="checkbox" name="buttons" value="自定义3"> 自定义3</label>
    </fieldset>

    <fieldset>
      <legend>背景遮罩</legend>
      <label><input type="radio" name="mask" value="" checked> 默认</label>
      <label><input type="radio" name="mask" value="not_mask"> 透明</label>
    </fieldset>

    <fieldset>
      <legend>背景遮罩是否可关闭对话框</legend>
      <label><input type="radio" name="maskClose" value="1" checked> 允许</label>
      <label><input type="radio" name="maskClose" value="0"> 禁止</label>
    </fieldset>

    <fieldset>
      <legend>主题样式</legend>
      <label><input type="radio" name="theme" value="" checked> 默认</label>
      <label><input type="radio" name="theme" value="ios"> iOS</label>
    </fieldset>

    <fieldset>
      <legend>显示对话框</legend>
      <button type="button" name="alert">模拟 alert</button>
      <button type="button" name="confirm">模拟 confirm</button>
      <button type="button" name="prompt">模拟 prompt</button>
      <p id="result_confirm"></p>
      <p id="result_prompt"></p>
    </fieldset>
  </form>

  <div id="prompt_box">
    <label for="prompt_name">您正在使用的什么浏览器？</label>
    <input id="prompt_name" type="text">
  </div>

  <div class="about">
    <section>
      <h2>文档</h2>
      <p><a target="_blank" href="https://github.com/ciaoca/cxDialog">Github</a></p>
    </section>
    <section>
      <h2>作者</h2>
      <p><a target="_blank" href="http://ciaoca.com/">Ciaoca</a></p>
    </section>
    <section>
      <h2>协议</h2>
      <p>Released under the MIT license</p>
    </section>
  </div>
</div>
</div>

<!-- <script src="//cdn.staticfile.org/jquery/1.9.0/jquery.min.js"></script> -->
<script src="//cdn.staticfile.org/zepto/1.1.1/zepto.min.js"></script>
<script src="js/jquery.cxdialog.js"></script>
<script>
(function() {
  var form = $('#example');
  var promptName = document.getElementById('prompt_name');

  var setOptions = function() {
{'fraction_non_alphanumeric': 0.21091290661070305, 'fraction_numerical': 0.025183630640083946, 'mean_word_length': 4.659033078880407, 'pattern_counts': {'":': 0, '<': 243, '<?xml version=': 0, '>': 243, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3037264', 'n_tokens_mistral': 2732, 'n_tokens_neox': 2705, 'n_words': 404}