Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Light
Dark
System
Ask  Question

Double popup


Hello,

How can I open a popup inside another without hiding the first one on the Demo29 template ?

I use HTML/CSS/Bootstrap/JS.

Thank's in advance.

Have a nice day,

Lucas


user
Lucas Sappey 1 year ago
Metronic HTML Bootstrap
4 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)

S
Sean Author1 year ago

Hi,

Could you please provide more info? Which component are you using? Bootstrap Modal ?

Regards.


user
Lucas Sappey 1 year ago

Here is my first modal : 

<!--Modal DOSSIER-->
<button data-bs-toggle="modal" data-bs-target="#kt_modal_view_dossier"> </button>
<div class="modal fade" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl">
<!--begin::Modal content-->
<div class="modal-content modal-rounded">
<!--begin::Modal header-->
<div class="modal-header">
<!--begin::Title-->
<div >
 <span class="row align-content-center justify-content-center">
 {% if est_entreprise %}
 <span class="svg-icon svg-icon-primary svg-icon-3x"><!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo2/dist/../src/media/svg/icons/Home/Building.svg-->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 <rect x="0" y="0" width="24" height="24"/>
 <path d="M13.5,21 L13.5,18 C13.5,17.4477153 13.0522847,17 12.5,17 L11.5,17 C10.9477153,17 10.5,17.4477153 10.5,18 L10.5,21 L5,21 L5,4 C5,2.8954305 5.8954305,2 7,2 L17,2 C18.1045695,2 19,2.8954305 19,4 L19,21 L13.5,21 Z M9,4 C8.44771525,4 8,4.44771525 8,5 L8,6 C8,6.55228475 8.44771525,7 9,7 L10,7 C10.5522847,7 11,6.55228475 11,6 L11,5 C11,4.44771525 10.5522847,4 10,4 L9,4 Z M14,4 C13.4477153,4 13,4.44771525 13,5 L13,6 C13,6.55228475 13.4477153,7 14,7 L15,7 C15.5522847,7 16,6.55228475 16,6 L16,5 C16,4.44771525 15.5522847,4 15,4 L14,4 Z M9,8 C8.44771525,8 8,8.44771525 8,9 L8,10 C8,10.5522847 8.44771525,11 9,11 L10,11 C10.5522847,11 11,10.5522847 11,10 L11,9 C11,8.44771525 10.5522847,8 10,8 L9,8 Z M9,12 C8.44771525,12 8,12.4477153 8,13 L8,14 C8,14.5522847 8.44771525,15 9,15 L10,15 C10.5522847,15 11,14.5522847 11,14 L11,13 C11,12.4477153 10.5522847,12 10,12 L9,12 Z M14,12 C13.4477153,12 13,12.4477153 13,13 L13,14 C13,14.5522847 13.4477153,15 14,15 L15,15 C15.5522847,15 16,14.5522847 16,14 L16,13 C16,12.4477153 15.5522847,12 15,12 L14,12 Z" fill="#0493A8"/>
 <rect fill="#FFFFFF" x="13" y="8" width="3" height="3" rx="1"/>
 <path d="M4,21 L20,21 C20.5522847,21 21,21.4477153 21,22 L21,22.4 C21,22.7313708 20.7313708,23 20.4,23 L3.6,23 C3.26862915,23 3,22.7313708 3,22.4 L3,22 C3,21.4477153 3.44771525,21 4,21 Z" fill="#0493A8" opacity="0.3"/>
 </g>
 </svg><!--end::Svg Icon-->
 </span>
 {% else %}

 <span class="svg-icon svg-icon-primary svg-icon-3x"><!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo2/dist/../src/media/svg/icons/Files/User-folder.svg-->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 <rect x="0" y="0" width="24" height="24"/>
 <path d="M3.5,21 L20.5,21 C21.3284271,21 22,20.3284271 22,19.5 L22,8.5 C22,7.67157288 21.3284271,7 20.5,7 L10,7 L7.43933983,4.43933983 C7.15803526,4.15803526 6.77650439,4 6.37867966,4 L3.5,4 C2.67157288,4 2,4.67157288 2,5.5 L2,19.5 C2,20.3284271 2.67157288,21 3.5,21 Z" fill="#0493A8" opacity="0.3"/>
 <path d="M12,13 C10.8954305,13 10,12.1045695 10,11 C10,9.8954305 10.8954305,9 12,9 C13.1045695,9 14,9.8954305 14,11 C14,12.1045695 13.1045695,13 12,13 Z" fill="#0493A8" opacity="0.3"/>
 <path d="M7.00036205,18.4995035 C7.21569918,15.5165724 9.36772908,14 11.9907452,14 C14.6506758,14 16.8360465,15.4332455 16.9988413,18.5 C17.0053266,18.6221713 16.9988413,19 16.5815,19 C14.5228466,19 11.463736,19 7.4041679,19 C7.26484009,19 6.98863236,18.6619875 7.00036205,18.4995035 Z" fill="#0493A8" opacity="0.3"/>
 </g>
 </svg><!--end::Svg Icon-->
 </span>
 {% endif %}

 <div >
 <h2>{{ dossierSerializer.nom }}</h2>
 <span>{{ dossierSerializer.date_creation }}</span>
 </div>
 </span>
<div >
<div class="badge badge-lg badge-light-{{ dossierSerializer.color_statut }} fw-bold my-1">
{{ dossierSerializer.statut }}
</div>
<span>{{ dossierSerializer.date_statut }}</span>
</div>
</div>
<!--end::Title-->
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
<span class="svg-icon svg-icon-1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Close-->
</div>
<!--begin::Modal header-->
<!--begin::Modal body-->
<div class="modal-body" >
<div class="row justify-content-around h-100">
<div class="col-8" >
<div class="row-6 card" >
<div class="card-header cursor-pointer">
<!--begin::Card title-->
<div class="card-title m-0">
<h3 class="fw-bold m-0">B&eacute;n&eacute;ficiaire
</div>
<!--end::Card title-->
</div>
<div class="px-6" >
<form class="form" action="">
{% csrf_token %}
<div class="card-body p-4">
<input type="checkbox" name="est_entreprise" {% if est_entreprise %}checked{% endif %}>
{% crispy beneficiaire_form %}
</div>
</form>
</div>
</div>
<div class="row-6 justify-content-between">
<div class="col card">
<div class="card-header cursor-pointer" >
<!--begin::Card title-->
<div class="card-title m-0">
<h3 class="fw-bold m-0">Op&eacute;rations
</div>
<!--end::Card title-->
<!--begin::Action-->
<!--end::Action-->
<button class="btn btn-sm btn-primary align-self-center">Ajouter</button>
<!--end::Action-->
</div>
<div class="px-9" >
<!--begin::Table-->
<table class="table align-middle table-row-dashed fs-6 gy-3" >
<!--begin::Table head-->
<thead>
<!--begin::Table row-->
<tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
<th class="min-w-100px">Fiche</th>
<th class="min-w-50px">Cumac</th>
<th class="min-w-50px">Prime vers&eacute;e</th>
<th class="min-w-50px">Prime gard&eacute;e</th>
<th class="min-w-50px">Nom installateur</th>
<th class="min-w-50px">Siret installateur</th>
<th class="min-w-50px">QT&Eacute;</th>
<th class="min-w-50px">Actions</th>
</tr>
<!--end::Table row-->
</thead>
<!--end::Table head-->
<!--begin::Table body-->
<tbody class="fw-bold text-gray-600" >
{% for operation in dossier.operations.all %}
<tr>
<td>
{% comment %} <input value="" disabled> {% endcomment %}
{{ operation.fiche.nom }}
</td>
<td>
{{ operation.cumac }}
</td>
<td>
{{ operation.prime_versee }}
</td>
<td>
??
</td>
<td>
{{ operation.nom_installateur }}
</td>
<td>
{{ operation.siret_installateur }}
</td>
<td>
{{ operation.quantite }}
</td>
<td class="row">
<button onclick="open_modal_operation({{operation.id}}, {{ dossier_id }})" class="btn btn-icon btn-sm btn-light btn-active-primary w-25px h-25px">
<i class="bi bi-pencil-square"></i>
</button>
<button onclick="remove_operation({{operation.id}}, {{ dossier_id }})" type="button" class="btn btn-icon btn-sm btn-light btn-active-primary w-25px h-25px">
<i class="bi bi-trash-fill fs-2"></i>
</button>
</td>
</tr>
{% endfor %}
</tbody>
<!--end::Table body-->
</table>
<!--end::Table-->
</div>
<!--end::Card body-->
</div>
</div>
</div>
<div class="col-4 card" >
<div class="card-header cursor-pointer" >
<!--begin::Card title-->
<div class="card-title m-0">
<h3 class="fw-bold m-0">Fichiers
</div>
<!--end::Card title-->
<!--begin::Action-->
{% comment %}
<a class="dropzone-select btn btn-sm btn-primary me-2 dz-clickable">Ajouter des Fichiers</a>
{% endcomment %}
<form class="form" action="">
{% csrf_token %}
<input type="hidden" name="dossier_id" value="{{ dossier.id }}">
<label for="file" class="btn btn-sm btn-primary align-self-center">Ajouter</label>
<input accept=".pdf" name="fichiers_dossier" class="input-file" type="file" multiple="multiple">
</form>
<!--end::Action-->
</div>
<div class="pt-6" >
{% for fichier in liste_fichiers %}
<!--begin::Item-->
<div class="d-flex flex-stack">
<!--begin::Symbol-->
<div class="symbol symbol-40px me-1">
<span class="svg-icon svg-icon-2x svg-icon-primary me-4">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path opacity="0.3" d="M19 22H5C4.4 22 4 21.6 4 21V3C4 2.4 4.4 2 5 2H14L20 8V21C20 21.6 19.6 22 19 22Z" fill="currentColor"></path>
 <path d="M15 8H20L14 2V7C14 7.6 14.4 8 15 8Z" fill="currentColor"></path>
 </svg>
 </span>
</div>
<!--end::Symbol-->
<!--begin::Section-->
<div class="d-flex align-items-center flex-row-fluid flex-wrap">
<!--begin:Author-->
<div class="flex-grow-1 me-2" >
<a href="%7B%7B%20fichier.fichier.url%20%7D%7D%22%20download%20class=%22text-gray-800%20text-hover-primary%20fs-6%20fw-semibold" target="_blank">{{ fichier.filename }}</a>
</div>
<!--end:Author-->
<!--begin::Actions-->
<a href="#%22%20onclick=%22removeFile(%7B%7Bfichier.id%7D%7D)%22%20class=%22btn%20btn-sm%20btn-icon%20btn-bg-light%20btn-active-color-primary%20w-30px%20h-30px" target="_blank">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-2"><i class="bi bi-trash3"></i></span>
<!--end::Svg Icon-->
</a>
<!--begin::Actions-->
</div>
<!--end::Section-->
</div>
<!--end::Item-->
<!--begin::Separator-->
<div class="separator separator-dashed my-4"></div>
<!--end::Separator-->
{% endfor %}
</div>
</div>
<!--end::Modal body-->
</div>
<!--end::Modal content-->
</div>
</div>
</div>
</div>


Here is the second one that is open when open_modal_operation() (click on invisible_button_operation button) is call :


<!--Modal OPERATION-->
<button data-bs-toggle="modal" data-bs-target="#kt_modal_view_operation"></button>
<div class="modal fade" tabindex="-1" aria-hidden="true">
<!--begin::Modal dialog-->
<div class="modal-dialog modal-dialog-centered mw-650px">
 <!--begin::Modal content-->
 <div class="modal-content">
 <!--begin::Form-->
 <!--begin::Modal header-->
 <div class="modal-header" >
 <!--begin::Modal title-->
 <div class="row">
 <div >
 <h2>COUCOU</h2>
 </div>
 </div>
 <!--end::Modal title-->
 <!--begin::Close-->
 <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
 <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
 <span class="svg-icon svg-icon-1">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
 <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
 </svg>
 </span>
 <!--end::Svg Icon-->
 </div>
 <!--end::Close-->
 </div>
 <!--end::Modal header-->
 <!--begin::Modal body-->
 <div class="modal-body py-10 px-lg-17">
 <!--begin::Scroll-->
 <div class="scroll-y me-n7 pe-7" >
 <!--begin::Notice-->
 <!--begin::Notice-->
 <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed mb-9 p-6">
 <!--begin::Icon-->
 <!--begin::Svg Icon | path: icons/duotune/general/gen044.svg-->
 <span class="svg-icon svg-icon-2tx svg-icon-warning me-4">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="currentColor" />
 <rect x="11" y="14" width="7" height="2" rx="1" transform="rotate(-90 11 14)" fill="currentColor" />
 <rect x="11" y="17" width="2" height="2" rx="1" transform="rotate(-90 11 17)" fill="currentColor" />
 </svg>
 </span>
 <!--end::Svg Icon-->
 <!--end::Icon-->
 <!--begin::Wrapper-->
 <div class="d-flex flex-stack flex-grow-1">
 <!--begin::Content-->
 <div class="fw-semibold">
 <h4 class="text-gray-900 fw-bold">Raison(s)</h4>
 <div class="fs-6 text-gray-700">
 COMMENT
 </div>
 </div>
 <!--end::Content-->
 </div>
 <!--end::Wrapper-->
 </div>
 <!--end::Notice-->

 <!--end::Input group-->
 <!--begin::Input group-->
 <div class="fv-row mb-5">
 <!--begin::Wrapper-->
 <div class="d-flex flex-stack">
 <!--begin::Label-->
 <div class="me-5">
 <!--begin::Label-->
 {% comment %} <label class="fs-5 fw-semibold">Je certifie avoir coriger les erreurs ci dessus</label> {% endcomment %}
 <!--end::Label-->
 <!--begin::Input-->
 <div class="fs-5 fw-semibold text-muted"><span class="required">Je certifie avoir corriger les erreurs ci-dessus</span></div>
 <!--end::Input-->
 </div>
 <!--end::Label-->
 <!--begin::Switch-->
 <label class="form-check form-switch form-check-custom form-check-solid">
 <!--begin::Input-->
 <input class="form-check-input" type="checkbox" value="1"/>
 <!--end::Input-->
 <!--begin::Label-->
 <span class="form-check-label fw-semibold text-muted">Oui</span>
 <!--end::Label-->
 </label>

 <!--end::Switch-->
 </div>

 <div class="fv-plugins-message-container invalid-feedback" >
 <div data-field="target_title" data-validator="notEmpty">* Veuillez certifier avoir corriger les erreurs ci-dessus</div>
 </div>
 <!--begin::Wrapper-->
 </div>
 <!--end::Input group-->
 </div>
 <!--end::Scroll-->
 </div>
 <!--end::Modal body-->
 <!--begin::Modal footer-->

 <div class="modal-footer flex-center">

 <!--begin::Button-->
 <button data-bs-dismiss="modal" class="btn btn-light me-3">Retour</button>
 <!--end::Button-->
 <!--begin::Button-->
 <button onclick="new_verification_asked({{verif.dossier.id}})" class="btn btn-primary">
 <span class="indicator-label">Rev&eacute;rifier</span>
 </button>
 <!--end::Button-->
 </div>
 <!--end::Modal footer-->
 <!--end::Form-->
 </div>
</div>
</div>


To respond to your question, I think that the component we are using doesn't matter, if you have an example with the basic one that work with two modal, it will be perfect ;)

Thank's !


S
Sean Author1 year ago

Hi,

Noted, you need the stacked modals.

Unfortunately Bootstrap Modal component does not support stacking. We will find a workaround for this and release it in a future update as a new option. Once we have the solution we will let you know here.

Regards.


S
Sean Author1 year ago

Hi,

Please refer to this solution.

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(