diff --git a/accounting/templates/accounting/account_detail.html b/accounting/templates/accounting/account_detail.html
index 6ca23c9..539102d 100644
--- a/accounting/templates/accounting/account_detail.html
+++ b/accounting/templates/accounting/account_detail.html
@@ -42,7 +42,7 @@ First written: 2020/8/8
 <form action="{% url "accounting:accounts.delete" account as url %}{% url_keep_return url %}" method="post">
   {% csrf_token %}
   <!-- The Modal -->
-  <div class="modal" id="del-modal">
+  <div class="modal fade" id="del-modal">
     <div class="modal-dialog">
       <div class="modal-content">
 
diff --git a/accounting/templates/accounting/include/report-chooser.html b/accounting/templates/accounting/include/report-chooser.html
index d3c7d99..6d9126e 100644
--- a/accounting/templates/accounting/include/report-chooser.html
+++ b/accounting/templates/accounting/include/report-chooser.html
@@ -25,7 +25,7 @@ First written: 2020/7/9
 <!-- the accounting record search dialog -->
 <form action="{% url "accounting:search" %}" method="GET">
   <!-- The Modal -->
-  <div class="modal" id="accounting-search-modal">
+  <div class="modal fade" id="accounting-search-modal">
     <div class="modal-dialog">
       <div class="modal-content">
 
diff --git a/accounting/templates/accounting/include/summary-helper.html b/accounting/templates/accounting/include/summary-helper.html
index 97e2c46..37bea60 100644
--- a/accounting/templates/accounting/include/summary-helper.html
+++ b/accounting/templates/accounting/include/summary-helper.html
@@ -25,7 +25,7 @@ First written: 2020/4/3
 <!-- The Modal -->
 <form id="summary-helper-form" action="" method="get">
   <input id="summary-record" type="hidden" value="" />
-  <div class="modal" id="summary-modal">
+  <div class="modal fade" id="summary-modal">
     <div class="modal-dialog">
       <div class="modal-content">
 
diff --git a/accounting/templates/accounting/transaction_expense_detail.html b/accounting/templates/accounting/transaction_expense_detail.html
index 19fe255..cbc2ede 100644
--- a/accounting/templates/accounting/transaction_expense_detail.html
+++ b/accounting/templates/accounting/transaction_expense_detail.html
@@ -44,7 +44,7 @@ First written: 2020/7/23
 <form action="{% url "accounting:transactions.delete" txn as url %}{% url_keep_return url %}" method="post">
   {% csrf_token %}
   <!-- The Modal -->
-  <div class="modal" id="del-modal">
+  <div class="modal fade" id="del-modal">
     <div class="modal-dialog">
       <div class="modal-content">
 
diff --git a/accounting/templates/accounting/transaction_income_detail.html b/accounting/templates/accounting/transaction_income_detail.html
index fac24df..52006c9 100644
--- a/accounting/templates/accounting/transaction_income_detail.html
+++ b/accounting/templates/accounting/transaction_income_detail.html
@@ -44,7 +44,7 @@ First written: 2020/7/23
 <form action="{% url "accounting:transactions.delete" txn as url %}{% url_keep_return url %}" method="post">
   {% csrf_token %}
   <!-- The Modal -->
-  <div class="modal" id="del-modal">
+  <div class="modal fade" id="del-modal">
     <div class="modal-dialog">
       <div class="modal-content">
 
diff --git a/accounting/templates/accounting/transaction_transfer_detail.html b/accounting/templates/accounting/transaction_transfer_detail.html
index 50cb5e6..d83c612 100644
--- a/accounting/templates/accounting/transaction_transfer_detail.html
+++ b/accounting/templates/accounting/transaction_transfer_detail.html
@@ -44,7 +44,7 @@ First written: 2020/7/23
 <form action="{% url "accounting:transactions.delete" txn as url %}{% url_keep_return url %}" method="post">
   {% csrf_token %}
   <!-- The Modal -->
-  <div class="modal" id="del-modal">
+  <div class="modal fade" id="del-modal">
     <div class="modal-dialog">
       <div class="modal-content">
 
diff --git a/mia_core/templates/mia_core/include/period-chooser.html b/mia_core/templates/mia_core/include/period-chooser.html
index 1fceabf..d46dcb6 100644
--- a/mia_core/templates/mia_core/include/period-chooser.html
+++ b/mia_core/templates/mia_core/include/period-chooser.html
@@ -26,7 +26,7 @@ First written: 2020/7/10
 <!-- The Modal -->
 <input id="period-url" type="hidden" value="{% url_period "0000-00-00" %}" />
 <input id="period-month-picker-params" type="hidden" value="{{ period.month_picker_params }}" />
-<div class="modal" id="period-modal">
+<div class="modal fade" id="period-modal">
   <div class="modal-dialog">
     <div class="modal-content">