Wappler Version : 4.0.4
Operating System : Mac M1
Server Model: NodeJS
Database Type: MariaDB
Hosting Type: Linode Server
The modal should be hidden completely.
The modal is hidding but not the backdrop.
Create a modal and add the “Hide” modal action in “dynamic Events”, then try it.
<button type="button" class="btn btn-primary" dmx-on:click="modal_add_category.hide()">test</button>
Is this Bootstrap 4 or 5?
Bootstrap 5 
I have tried to duplicate the problem, without success as the following code will testify.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Untitled Document</title>
<link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="dmxAppConnect/dmxAppConnect.js"></script>
<script src="dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer=""></script>
</head>
<body is="dmx-app" id="test">
<div class="container">
<div class="row">
<div class="col text-end">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvasExample">
Open Offcanvas
</button>
<button id="btn1" class="btn btn-success" dmx-on:click="modal1.show()">Open Modal</button>
</div>
</div>
</div>
<!-- offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
</div>
</div>
<!-- modal -->
<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" dmx-on:click="modal1.hide()">Save changes</button>
</div>
</div>
</div>
</div>
<script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The original Bootstrap components, Off canvas and Modal, do share some style rules. This may be the cause of your problem.
However, the DMXModal, which has been used in my example, should not be burdened with that problem. In other words, have you included:
<script src="dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer=""></script>
Thanks for your help @ben!
Yes it’s included.
Actually the modal is working well when there are no dynamic action, it’s not working only when I use a form in it with a server action.
Screen Recording 2021-09-21 at 9.46.57 AM
I can’t recreate this, please provide your code or a link to the page where we can see what are you doing.
Here is the code:
<meta name="ac:route" content="/dashboard/budget">
<dmx-serverconnect id="sc_budget_categories" url="../api/Budget/listCategories"></dmx-serverconnect>
<dmx-serverconnect id="sc_recurring_expenses" url="../api/Budget/listExpenses"></dmx-serverconnect>
<div class="modal fade" id="modal_add_category" is="dmx-bs5-modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header bg-light">
<h5 class="modal-title">Ajouter une catégorie</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-light">
<form id="form_add_category" method="post" is="dmx-serverconnect-form" action="../api/Budget/addCategory" dmx-on:success="modal_add_category.hide();alert.success('Catégorie enregistrée.');form_add_category.reset();sc_budget_categories.load({},true)">
<div class="form-floating mb-3">
<input type="text" class="form-control" placeholder="Entrez le nom de la catégorie" id="labelCatName" name="categoryname" required="" data-msg-required="Vous devez entrer un nom.">
<label for="labelexpenseName">Nom de la catégorie</label>
</div>
<div class="mb-3" id="colorinput_group" is="dmx-radio-group">
<legend class="col-form-label">Choisissez une couleur :</legend>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" value="primary" id="colorinput_primary" name="colorinput">
<label class="form-check-label" for="colorinput_primary">Bleu <span class="badge bg-primary"><i class="bi bi-palette"></i></span></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" value="secondary" id="colorinput_secondary" name="colorinput">
<label class="form-check-label" for="colorinput_secondary">Gris <span class="badge bg-secondary"><i class="bi bi-palette"></i></span></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" value="green" id="colorinput_success" name="colorinput">
<label class="form-check-label" for="colorinput_success">Vert <span class="badge bg-success"><i class="bi bi-palette"></i></span></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" value="danger" id="colorinput_danger" name="colorinput">
<label class="form-check-label" for="colorinput_danger">Rouge <span class="badge bg-danger"><i class="bi bi-palette"></i></span></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" value="warning" id="colorinput_warning" name="colorinput">
<label class="form-check-label" for="colorinput_warning">Jaune <span class="badge bg-warning"><i class="bi bi-palette"></i></span></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" value="info" id="colorinput_info" name="colorinput">
<label class="form-check-label" for="colorinput_info">Cyan <span class="badge bg-info"><i class="bi bi-palette"></i></span></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" value="dark" id="colorinput_dark" name="colorinput">
<label class="form-check-label" for="colorinput_dark">Noir <span class="badge bg-dark"><i class="bi bi-palette"></i></span></label>
</div>
</div>
</form>
</div>
<div class="modal-footer bg-light">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary" dmx-on:click="form_add_category.submit(true)">Enregistrer</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal_add_rec_expense" is="dmx-bs5-modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header bg-light">
<h5 class="modal-title">Ajouter une dépense récurrente</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-light">
<form id="form_add_rec_expense" method="post" is="dmx-serverconnect-form" action="../api/Budget/addRecExpense" dmx-on:success="form_add_rec_expense.reset();modal_add_rec_expense.hide();sc_recurring_expenses.load({},true);alert.success('Dépense enregistrée.')">
<div class="form-floating mb-3">
<input type="text" class="form-control" placeholder="Entrez un nom pour cette dépense" id="labelExpenseName" name="expensename" required="" data-msg-required="Vous devez entrer un nom.">
<label for="labelExpenseName">Nom pour cette dépense</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" placeholder="Entrez une description" id="labelExpenseDescription" name="expensedescription" required="" data-msg-required="Vous devez entrer un nom.">
<label for="labelExpenseAmount">Description pour cette dépense</label>
</div>
<div class="form-floating mb-3">
<input type="number" class="form-control" placeholder="Entrez le montant" id="labelExpenseAmount" name="expenseamount" required="" data-msg-required="Vous devez entrer un montant.">
<label for="labelExpenseAmount">Montant de cette dépense</label>
</div>
<div class="form-floating mb-2">
<select class="form-select" id="recexpensecategory" aria-label="Category" dmx-bind:options="sc_budget_categories.data.q_list_categories" optiontext="name" optionvalue="id" name="recexpensecategory">
<option selected>Dans quelle catégorie mettre cette dépense ?</option>
</select>
<label for="recexpensecategory">Catégorie</label>
</div>
<div class="mb-3" id="recurring_type_group" is="dmx-radio-group">
<legend class="col-form-label">Quelle récurrence ?</legend>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" value="monthly" id="recurring_type_monthly" name="recurring_type">
<label class="form-check-label" for="recurring_type_monthly">Tous les mois</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" value="secondary" id="recurring_type_annually" name="recurring_type">
<label class="form-check-label" for="recurring_type_annually">Tous les ans</label>
</div>
</div>
</form>
</div>
<div class="modal-footer bg-light">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary" dmx-on:click="form_add_rec_expense.submit(true)">Enregistrer</button>
</div>
</div>
</div>
</div>
<%- await include('/partials/dashboard_header', Object.assign({}, locals)) %>
<main class="mt-5">
<div class="container mb-5">
<div class="row">
<div class="col">
<div class="d-flex justify-content-start">
<button type="button" class="btn btn-primary cadeb_btn_list_cetegories btn-sm" data-bs-toggle="modal" data-bs-target="#modal_add_category" dmx-on:click="modal_add_category.show()"><i class="bi bi-plus-lg"></i> Ajouter une catégorie</button>
<form id="form_delete_category" method="post" is="dmx-serverconnect-form" action="../api/Budget/deleteCategory" dmx-on:success="alert.success('Catégorie supprimée.');form_delete_category.reset();sc_budget_categories.load({},true)">
<input id="delete_category_id" name="delete_category_id" type="hidden" class="form-control">
</form>
<div dmx-repeat:rp_budget_categories="sc_budget_categories.data.q_list_categories">
<button type="button" class="btn btn-outline-primary cadeb_btn_list_cetegories btn-sm" dmx-on:click="run([{run:{action:`form_delete_category.delete_category_id.setValue(id)`,name:'delete_category_id'}},{'bootbox.confirm':{message:'Souhaitez-vous réellement supprimer cette catégorie ?',title:'Supprimer la catégorie',buttons:{confirm:{label:'Oui',className:'btn-danger'},cancel:{label:'Non',className:'btn-secondary'}},centerVertical:true,closeButton:false,then:{steps:{run:{action:`form_delete_category.submit()`,name:'run_delete_category'}}},name:'deleteCategory'}}])" dmx-class:btn-outline-secondary="(color == 'secondary')" dmx-class:btn-outline-success="(color == 'success')" dmx-class:btn-outline-danger="(color == 'danger')" dmx-class:btn-outline-warning="(color == 'warning')" dmx-class:btn-outline-info="(color == 'info')" dmx-class:btn-outline-dark="(color == 'dark')" dmx-class:btn-outline-primary="(color == 'primary')">{{name}} <i class=" bi bi-x-lg"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<h3 class="mb-3 text-uppercase">Dépenses <b>Récurrentes</b></h3>
</div>
<div class="col-2 text-end">
<button id="btn_add_rec_expense" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modal_add_rec_expense"><i class="bi bi-plus-lg"></i></button>
</div>
</div>
<div class="row">
<div class="col">
<div class="list-group" is="dmx-repeat" id="rp_rec_expenses" dmx-bind:repeat="sc_recurring_expenses.data.q_list_expenses" key="id">
<a href="#" class="list-group-item list-group-item-action text-white list-group-item-dark" aria-current="true" dmx-class:bg-primary="(catcolor == 'primary')" dmx-class:bg-danger="(catcolor == 'danger')" dmx-style:border-left.important="'5px solid '+catcolor">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">{{name}}</h5>
<small>150$</small>
</div>
<p class="mb-1">{{description}}</p>
<small dmx-show="(monthly == 1)"><strong><i>Tous les mois.</i></strong></small><small dmx-show="(annually == 1)"><strong><i>Tous les ans</i></strong></small>
</a>
</div>
</div>
</div>
<div class="row" dmx-show="(content.sc_recurring_expenses.data.q_list_expenses.count()) == 0">
<div class="col">
<div class="d-flex pt-4 pb-4 ps-2 pe-2 justify-content-center align-items-center text-white bg-secondary rounded">
<p class="mb-0">Aucune dépense enregistrée pour le moment.</p>
</div>
</div>
</div>
</div>
<div class="col">
<h3 class="text-uppercase">Dépenses <b>Ponctuelles</b></h3>
</div>
</div>
</div>
</main>```I don’t know what happened exactly, but I restarted the project (brand new project based on the previous one) and everything is working like a charm now… 