How to use custom callback in semantic-ui modal

Question

I want to use more than 2 buttons in a semantic-ui model for feedback purposes like easy , normal and hard . And I also need to perform the action in accordance with the pressed button.

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

Or any alternative solution to this.

Answer 1

Well, the ideal solution would be if you could find out which button was pressed in any of the callbacks. Unfortunately, I cannot find a way to do this.

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

So, instead of the above, add event listeners to your buttons. Thus, you know which answer 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> </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; } }).modal("show"); }).on("click", ".ui.button", function () { switch ($(this).data("value")) { case 'easy': $("#result").html("easy"); $(".ui.modal").modal("hide"); break; case 'normal': $("#result").html("normal"); $(".ui.modal").modal("hide"); break; case 'hard': $("#result").html("hard"); $(".ui.modal").modal("hide"); break; } }); </script> 

Working demo: http://jsfiddle.net/osgg8kzL/1/

Answer 2

 onApprove: function (e) { console.log(e); // returns the button } 

So html:

 <div class="ui modal"> <div class="content"> choose </div> <div class="actions"> <button class="ui button easy ok">easy</button> <button class="ui button normal ok">normal</button> <button class="ui button hard ok">hard</button> </div> </div> 

and js:

 $('.ui.modal').modal({ onApprove: function (e) { if (e.hasClass('easy')) { yourstuff() } if (e.hasClass('normal')) { yourstuff() } if (e.hasClass('hard')) { yourstuff() } }, }).modal('show')