Is it possible to use 2 Bootstrap 5 Modals on the same page? From my research, it should be able to handle it, but unfortunately it does not work for me and my console is giving me error: Uncaught TypeError: Illegal invocation
The Modal n.1 (for login) works just fine, but Modal n.2 (register) is giving me the error mentioned above. I do have different ID for both of them as you can check in the code below.
Modal action links in my dropdown:
<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">Login</a></li>
<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-target="#registerModal">Register</a></li>
Modals:
<!-- Login Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModal-label" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center" id="loginLabel">Login</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<?php require './Login.php'; ?>
</div>
</div>
</div>
</div>
<!-- Register Modal -->
<div class="modal fade" id="registerModal" tabindex="-1" aria-labelledby="registerModal-label" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center" id="registerLabel">Register</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<?php require './Register.php'; ?>
</div>
</div>
</div>
</div>
You are using different attributes on your dropdown items:
<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">Login</a></li>
<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-target="#registerModal">Register</a></li>
In your second line you are using data-target instead of data-bs-target, change your code to:
<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">Login</a></li>
<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#registerModal">Register</a></li>
Related
I am trying to make a display while looping through items and displaying buttons. The buttons can open modals that display some data. I have tried to pass the data to the modal but it is just displaying the first iteration of the loops information and never get's updated. What do I need to do to make a modal for each iteration of my list?
#foreach ($forms as $form)
<div class="row">
<div class="col-lg-2">
<div style="float:left; padding-right: 10px;">
<a href="/form/{{$cuid}}/{{$form['cuBaseName']}}"
data-toggle="tooltip" title="Edit Fields"
><i class="fas fa-edit fa-2x"></i></a>
</div>
<div style="float:left; padding-right: 10px;">
<span data-toggle="modal" data-target="#copyFormModal">
<a href="#" data-toggle="tooltip" title="Copy"
><i class="fas fa-copy fa-2x"></i></a>
</span>
</div>
<div style="float:left; padding-right: 10px;">
<span data-toggle="modal" data-target="#deleteFormModal">
<a href="#" data-toggle="tooltip" title="Delete">
<i class="fas fa-trash-alt fa-2x"></i></a>
</span>
</div>
</div>
</div>
<hr>
#include('layouts.partials.modals.copyFormModal',['cuid'=>$cuid, 'cuBaseName'=> $form['cuBaseName']])
#include('layouts.partials.modals.deleteFormModal',['cuid'=>$cuid, 'cuBaseName'=> $form['cuBaseName']])
#endforeach
<!-- Modal -->
<div class="modal fade" id="deleteFormModal" tabindex="-1" role="dialog" aria-labelledby="deleteFormModal" aria-hidden="true" >
<div class="modal-dialog" role="document" style="max-width:900px;">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Delete Form</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete form <b>{{$cuBaseName}}</b> from <b>{{$cuid}}</b>?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" data-dismiss="modal"
onclick='location.href="/forms/{{$cuid}}/{{$cuBaseName}}/delete"' >Delete</button>
</div>
</div>
</div>
</div>
Try this, add a unique #id to each modal window:
#foreach ($forms as $form)
<div class="row">
<div class="col-lg-2">
<div style="float:left; padding-right: 10px;">
<a href="/form/{{$cuid}}/{{$form['cuBaseName']}}"
data-toggle="tooltip" title="Edit Fields"
><i class="fas fa-edit fa-2x"></i></a>
</div>
<div style="float:left; padding-right: 10px;">
<span data-toggle="modal" data-target="#copyFormModal-{{$cuid}}">
<a href="#" data-toggle="tooltip" title="Copy"
><i class="fas fa-copy fa-2x"></i></a>
</span>
</div>
<div style="float:left; padding-right: 10px;">
<span data-toggle="modal" data-target="#deleteFormModal-{{$cuid}}">
<a href="#" data-toggle="tooltip" title="Delete">
<i class="fas fa-trash-alt fa-2x"></i></a>
</span>
</div>
</div>
</div>
<hr>
#include('layouts.partials.modals.copyFormModal',['cuid'=>$cuid, 'cuBaseName'=> $form['cuBaseName']])
#include('layouts.partials.modals.deleteFormModal',['cuid'=>$cuid, 'cuBaseName'=> $form['cuBaseName']])
#endforeach
<!-- Modal example -->
<div class="modal fade" id="deleteFormModal-{{$cuid}}" tabindex="-1" role="dialog" aria-labelledby="deleteFormModal" aria-hidden="true" >
<div class="modal-dialog" role="document" style="max-width:900px;">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Delete Form</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete form <b>{{$cuBaseName}}</b> from <b>{{$cuid}}</b>?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" data-dismiss="modal"
onclick='location.href="/forms/{{$cuid}}/{{$cuBaseName}}/delete"' >Delete</button>
</div>
</div>
</div>
</div>
Hope it helps.
I have all my products in view:welcome.blade.php and The problem is how can I show modal with the details of a specific id?
<!-- End Product MEnu -->
<div class="row product__list">
#foreach($products as $product)
<!-- Start Single Product -->
<div class="col-md-3 single__pro col-lg-3 col-md-4 cat--1 col-sm-12">
<div class="product foo">
<div class="product__inner">
<div class="pro__thumb">
<a href="#">
<img src="{{ asset('storage/products/' . $product->image ) }}" width="270px" height="270px" alt="product images">
</a>
</div>
<div class="product__hover__info">
<ul class="product__action">
<li><a id="{{ $product->id }}" data-toggle="modal" data-target="#productModal" title="Quick View" class="quick-view modal-view detail-link viewDetails" href="#"><span class="ti-plus"></span></a></li>
<li><a title="Add TO Cart" href="cart.html"><span class="ti-shopping-cart"></span></a></li>
</ul>
</div>
<div class="add__to__wishlist">
<a data-toggle="tooltip" title="Add To Wishlist" class="add-to-cart" href="wishlist.html"><span class="ti-heart"></span></a>
</div>
</div>
<div class="product__details">
<h2>{{ $product->name }}</h2>
<ul class="product__price">
{{-- <li class="old__price">$16.00</li> --}}
<li class="new__price">₹ {{ $product->price }}</li>
</ul>
</div>
</div>
</div>
<!-- End Single Product -->
#endforeach
How can i show the details of a product in a modal?
Please Change Your data-target="#productModal{{ $product->id }}"
<div class="product__hover__info">
<ul class="product__action">
<li><span class="ti-plus"></span></li>
<li><a title="Add TO Cart" href="cart.html"><span class="ti-shopping-cart"></span></a></li>
</ul>
</div>
<div class="modal fade" id="productModal{{ $product->id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
{{$product->id}}
</div>
</div>
</div>
</div>
I am trying to display a modal in an accordion but whenever I click on the modal button, the screen becomes grey and the modal ends up not showing.
This is my code:
#if(isset($data))
<div class="panel-group" id="accordion">
#foreach($data as $datum)
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#{{$datum['id']}}">
{{ucfirst($datum['username'])}}</a>
</h4>
</div>
<div id="{{$datum['id']}}" class="panel-collapse collapse">
<div class="panel-body">
Current balance: {{$datum['wallet']['balance']}} <br>
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#{{$datum['id']}}">Transfer</button>
<!-- Modal -->
<div id="{{$datum['id']}}" class="modal fade in" role="dialog" >
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Transfer Funds</h4>
</div>
<div class="modal-body">
<div class="col-md-3">
<label>Amount</label>
<input type="number" name="amount" class="form-control" placeholder="Amount to be transferred">
</div>
<input type="text" name="sub_agent" value="{{$datum['username']}}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
#endif
You're using the same id="{{$datum['id']}}" for multiple HTML elements on your page:
<div id="{{$datum['id']}}" class="panel-collapse collapse">
...
<div id="{{$datum['id']}}" class="modal fade in" role="dialog">
Which means that these toggles:
<a data-toggle="collapse" data-parent="#accordion" href="#{{$datum['id']}}">
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#{{$datum['id']}}">Transfer</button>
Don't know what to target. Remember: in HTML, id attributes must be unique.
Try changing to the following:
<div id="{{$datum['id']}}_collapse" class="panel-collapse collapse">
...
<div id="{{$datum['id']}}_modal" class="modal fade in" role="dialog">
And adjust your targeting elements to:
<a data-toggle="collapse" data-parent="#accordion" href="#{{$datum['id']}}_collapse">
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#{{$datum['id']}}_modal">Transfer</button>
I was trying to use a modal. When I try to click the modal, it doesn't get focused. I'm calling the modal in the top bar navigation that is dropdown(located in the top right side). I have uploaded a photo, the link is under the code. I'm using bootstrap. I got the snippet from here
My code:
<ul class="nav navbar-right top-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin User <b class="fa fa-angle-down">
</b></a>
<ul class="dropdown-menu">
<!--=====HERE IS WHERE I CALL THE MODAL=====-->
<li>
<a href="#" data-toggle="modal" data-target="#changeProfile"><i class="fa fa-fw fa-cog">
</i> Change Profile</a>
</li>
<li class="divider">
</li>
<li>
<a href="#"><i class="fa fa-fw fa-power-off">
</i> Logout</a>
</li>
</ul>
</li>
</ul>
<!-- Modal Add Brand -->
<div class="modal fade" id="changeProfile" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>
Change Profile
</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="txtBusName" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" id="txtUsername" class="form-control">
</div>
</div>
<div class="form-group">
<label for="txtBusDesc" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" id="txtPassword" class="form-control">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<!-- Modal Add Brand -->
This is what it looks like. I can't click the modal at all.
Thanks!
Seems like your modal box's z-index value is lower than the half-transparent dark div that is used to "block" the page content. Try increasing your modal box's z-index value.
#changeProfile {
z-index: 9999;
}
when i click button and show Full information on model popup
<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal" >
<i class="glyphicon glyphicon-zoom-in"></i>
</button><!-- Modal -->
the information will be show model popup
Try this
<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal" >
<i class="glyphicon glyphicon-zoom-in"></i>
</button><div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Live Demo