JSFiddle - React, Tailwind, and code Playground

by adamschwartz

CSS

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.dialog.js"></script>
<link href="http://github.hubspot.com/vex/css/vex.css" rel="stylesheet" />
<link href="http://github.hubspot.com/vex/css/vex-theme-default.css" rel="stylesheet" />
<style>
.vex button[type="submit"][disabled] {
    opacity: .5;
    cursor: not-allowed    
}

CoffeeScript

vex.dialog.prompt
    className: 'vex-theme-default'
    message: 'Enter a non-empty value:'
    afterOpen: ($vexContent) ->
        $submit = $vexContent.find('button[type="submit"]')
        $submit.attr 'disabled', true
        $vexContent.find('input').on 'input', ->
            if $(this).val()
                $submit.removeAttr 'disabled'
            else
                $submit.attr 'disabled', true