Modal issues
So am trying to use many modals on a single page with @include syntax to include modals and it appears because of the way the frontend is been layed out, pls how can i include multiple modals on a page
Replies (8)
Hi Ubong,
Sorry that we have missed your reply. How's the issue going? Do you still face the issue?
Thanks
Hi Ubong,
Could you please send the screenshot of those 2 modals?
partials.modals._fundWalletModal
partials.modals._sendMoney
Thanks
<div class="modal fade" tabindex="-1" aria-hidden="true">
<!--begin::Modal dialog-->
<div class="modal-dialog modal-dialog-centered mw-900px">
<!--begin::Modal content-->
<div class="modal-content">
<!--begin::Modal header-->
<div class="modal-header">
<!--begin::Modal title-->
<h2>Fund wallet</h2>
<!--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 xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Close-->
</div>
<!--end::Modal header-->
<!--begin::Modal body-->
<div class="modal-body py-lg-10 px-lg-10">
<!--begin::Aside-->
<!--begin::Content-->
<div class="flex-row-fluid py-lg-5 px-lg-15">
<!--begin::Form-->
<form method="POST" class="form w-100" novalidate="novalidate" >
@csrf
@method("PUT")
<!--begin::Step 1-->
<div class="current" data-kt-stepper-element="content">
<div class="w-100">
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="d-flex align-items-center fs-5 fw-bold mb-2">
<span class="required">Amount to fund</span>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify your unique app name"></i>
</label>
<!--end::Label-->
<!--begin::Input-->
<input type="hidden" class="form-control form-control-lg form-control-solid" name="public_key" placeholder="" value="{{ env("FLUTTERWAVE_TEST_KEY")}}" />
<input type="hidden" class="form-control form-control-lg form-control-solid" name="success_status" placeholder="" value="" />
<input type="hidden" class="form-control form-control-lg form-control-solid" name="charged_amount" placeholder="" value="" />
<input type="text" class="form-control form-control-lg form-control-solid" name="amount" placeholder="" value="" />
<input type="hidden" class="form-control form-control-lg form-control-solid" name="email" value="{{ auth()->user()->email }}" />
<input type="hidden" class="form-control form-control-lg form-control-solid" name="phone_number" value="{{ auth()->user()->phone_number }}" />
<input type="hidden" class="form-control form-control-lg form-control-solid" name="fullname" value="{{ auth()->user()->first_name . " " . auth()->user()->last_name }}" />
<!--end::Input-->
</div>
<!--begin::Actions-->
<div class="d-flex flex-stack pt-10">
<!--begin::Wrapper-->
<div>
<button type="button" onclick="makePayment()" class="btn btn-lg btn-primary w-100 mb-5">
Pay
</button>
</div>
<!--end::Wrapper-->
</div>
<!--end::Actions-->
</form>
<!--end::Form-->
</div>
<!--end::Content-->
</div>
<!--end::Modal body-->
</div>
<!--end::Modal content-->
</div>
<!--end::Modal dialog-->
</div>Thanks Eric, check these out
@includeIf('partials.modals._fundWalletModal')
@includeIf('partials.modals._sendMoney')
i have those two includes on the index.blade.php page, the first modal shows when clicked but the second only fade the screen without actually displaying the modal.
Make sure you have your ID in your second modal is different from the ID in your first ,but also make sure that you are dismissing the first modal before launching the second one.
Hi Ubong,
Please make sure the modal div has this class. Modal div needs to be hidden from the page.
class="modal"Thanks
HI Ubong,
You break the modals into partial views. Like _create_modal_name.blade.php, then you can use @includeif('path/_create_modal_name')
In your modals itself make sure that you have different ID's for each modal.
