JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/css/uikit.min.css">

 
<button id="searchDetail" data-uk-modal="{target:'#searchModal',bgclose:false}"> search</button>
<div id="isay">
</div>

<!-- Start Modal -->
<div id="searchModal" class="uk-modal">
    <div class="uk-modal-dialog">
    <form class="uk-form uk-form-stacked">
    
  <div class="uk-modal-dialog">
  <fieldset data-uk-margin=""><label for="include_deleted" class="uk-margin-small-top">search.include_deleted&nbsp;<input type="checkbox" name="include_deleted" id="include_deleted" value="0"></label></fieldset></div>
    <br>
    <div class="uk-modal-footer uk-text-center"><button id="btnCancelSearch" class="uk-button uk-button-danger uk-button-large uk-modal-close">cancel</button>&nbsp;<button id="btnSubmitSearch" type="submit" class="uk-button uk-button-success uk-button-large">submit</button></div></form></div>

JavaScript

$('#btnCancelSearch').click( function(e) {
      $('#searchForm').trigger("reset");
    });
    
    
    $('#btnSubmitSearch').click( function(e) {
    e.preventDefault();
      $('#searchForm').trigger("reset");
      UIKit.modal("#searchModal").hide();
      $('#isay').html("coucou");
    });