JSFiddle - React, Tailwind, and code Playground

by He Lihui

HTML

<link rel="stylesheet" href="http://test.ebanji.com/fkui1.1/themes/default/fkui.min.css">
<script src="http://test.ebanji.com/fkui1.1/jquery.js"></script>

<script src="http://test.ebanji.com/fkui1.1/fkui.min.js")"></script>


<script>
    function openDialog() {
        $("#dialog").dialog('open');
    }

    $(function () {
        $("#dialog").dialog({
            title: '我是标题'
            , width: 450
            , height: 200
            , onOk: function () {
                alert("确定按钮被点击");
            }
        });
    });
</script>
<div id="dialog" >
    <form id="form1" class="form1">
        <div class="iptbox">
            <label>邮箱：</label>
            <span class="info">
                <input id="dd" type="text" name="name1" value="" class="fkui-validatebox" />
            </span>
        </div>
        <div class="iptbox">
            <label>邮箱2：</label>
            <span class="info">
                <input id="dd2" type="text" name="name1" value="" class="fkui-validatebox" data-options="placeholder:'请输入邮箱',required:true" />
            </span>
        </div>
    </form>
</div>
<a href="javascript:openDialog();" class="fkui-button green" >按钮</a>

CSS

/** 表单样式*/
.form1 {
    padding: 5px;
}

.iptbox {
    height: 24px;
    line-height: 24px;
    padding: 8px 0;
    overflow: hidden;
}

    .iptbox label {
        float: left;
        width: 86px;
        text-align: right;
        font-size: 14px;
    }

    .iptbox span.info {
        color: #4a4949;
    }

JavaScript

function openDialog() {
        $("#dialog").dialog('open');
    }

    $(function () {
        $("#dialog").dialog({
            title: '我是标题'
            , width: 450
            , height: 200
            , onOk: function () {
                alert("确定按钮被点击");
            }
        });
    });