netsmertia netsmertia - 8 months ago 36
HTML Question

How to use custom callback in semantic-ui modal

I want to use more than 2 button in semantic-ui modal for feedback purpose as

. And I also need to perform action according to button clicked.

I know how to use approve and deny button (I can use it for 2 buttons). But how to handle these 3 buttons with 3 different callback.

Or any alternative solution for this.


Well, the perfect solution would be if it were possible to know which button was pressed in any of the callbacks. Unfortunately I can't find a way to do that.

onApprove: function () {
    console.log(this); // returns the modal
    console.log(arguments); // returns an empty array

So, instead of above, add an event listeners to your buttons. This way you know which callback to execute.

<button class="show">Open</button>

<div class="ui small modal">
    <i class="close icon"></i>
    <div class="header">Test title</div>
    <div class="content">Test content</div>
    <div class="actions">
        <div class="ui button approve green" data-value="easy">Easy</div>
        <div class="ui button approve blue" data-value="normal">Normal</div>
        <div class="ui button approve red" data-value="hard">Hard</div>

<div>Result: <span id="result"></span></div>

<script type="text/javascript">
$(document).on("click", ".show", function () {
    $(".ui.modal").modal("setting", {
        closable: false,
        onApprove: function () {
            return false;
}).on("click", ".ui.button", function () {
    switch ($(this).data("value")) {
    case 'easy':
    case 'normal':
    case 'hard':

Working demo: