JSFiddle - React, Tailwind, and code Playground

by 亮 薛

HTML

<script src="https://cdnjs.xueliang.org/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.xueliang.org/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.xueliang.org/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.xueliang.org/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg open-modal" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form>
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">添加网址标签</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>标签</label>
            <input type="text" class="form-control" name="name" placeholder="请输入用户名">
          </div>
          <div class="form-group">
            <label for>网址</label>
            <input type="url" class="form-control" name="url" placeholder="请输入网址">
          </div>
          <div class="form-group">
            <label>分享级别</label>
            <select name="level" class="form-control">
              <option value="DEBUG">1</option>
              <option value="INFO">2</option>
              <option value="WARN">3</option>
            </select>
            <!-- <p class="help-block">Example block-level help text here.</p> -->
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>
  ...

CSS

body,
html {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript

$(function() {
  bootbox.addLocale('zh_CN', {
    OK: "确定",
    CANCEL: "取消",
    CONFIRM: "确定"
  });
  bootbox.setDefaults('locale', 'zh_CN'); //设置语言本地化
  $('form').on('submit', function(event) {
    event.preventDefault();
    $('#myModal').modal('hide');
    bootbox.alert('保存成功!');
  });
})();