Html Notification

Set the theme property of the jqxNotification. Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="jqxNotification">
    <div>Thank you for your feedback!</div>
</div>
<table style="margin-left: 15px; margin-top: 15px;">
    <tr>
        <td class="label">Name:</td>
        <td>
            <input id="name" type="text" />
        </td>
    </tr>
    <tr>
        <td class="label">E-mail:</td>
        <td>
            <input id="email" type="text" />
        </td>
    </tr>
    <tr>
        <td class="label" style="vertical-align: top;">Comment:</td>
        <td>
            <textarea id="comment" rows="10"></textarea>
        </td>
    </tr>
    <tr>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: center;">
            <button id="submit">Submit comment</button>
        </td>
    </tr>
</table>

JavaScript

$("#jqxNotification").jqxNotification({
    opacity: 1,
    autoOpen: false,
    template: null,
    theme: 'energyblue',
    icon: {
        width: 25,
        height: 25,
        url: '../../images/smiley.png',
        padding: 5
    }
});
$("#name, #email, #comment").jqxInput({
    width: 150
});
$("#submit").jqxButton();
$("#submit").click(function () {
    $("#name").val("");
    $("#email").val("");
    $("#comment").val("");
    $("#jqxNotification").jqxNotification("open");
});