JSFiddle - React, Tailwind, and code Playground

by rity

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/js/bootstrap-dialog.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<form id="createEventForm" action="http://10.10.15.30:8000/attendee/edit" style="display:none" method="POST">
    <label for="first_name">First_name:</label>
    <input name="first_name" value="Chris" id="first_name" type="text" />
    <label for="last_name">Last_name:</label>
    <input name="last_name" value="Griffin" id="last_name" type="text" />
    <input type="submit" />
</form>
<div id="form-content" class="modal hide fade in" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Send me a message</h3>
    </div>
    <div class="modal-body">
        <form class="contact" name="contact">
            <label class="label" for="name">Your Name</label><br>
            <input type="text" name="name" class="input-xlarge"><br>
            <label class="label" for="email">Your E-mail</label><br>
            <input type="email" name="email" class="input-xlarge"><br>
            <label class="label" for="message">Enter a Message</label><br>
            <textarea name="message" class="input-xlarge"></textarea>
        </form>
    </div>
    <div class="modal-footer">
        <input class="btn btn-success" type="submit" value="Send!" id="submit">
        <a href="#" class="btn" data-dismiss="modal">Nah.</a>
    </div>
</div>
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>

JavaScript

$(document).ready(function () {

    var form = $('#form-content').html();
    BootstrapDialog.show({
        title: 'Title',
        message: form,
        buttons: [{
            label: 'Update',
            action: function(dialog) {
                $('form').submit();
            }
        }]
    });

});