I am using bootstrap for popup
Here is my code:
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id='2' data-toggle="modal" data-target="#myModal">Open Modal</button>
<button type="button" class="btn btn-info btn-lg" id='3' data-toggle="modal" data-target="#myModal">Open Modal</button>
<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>
here there is two button is open same popup. I want to get which button is clicked. i want that button id
is it possible to get this?
Yes with bootstrap modal event listener,
modal trigger buttons
<button type="button" class="btn btn-info btn-lg" id='2' data-toggle="modal" data-target="#myModal">Open Modal</button>
<button type="button" class="btn btn-info btn-lg" id='3' data-toggle="modal" data-target="#myModal">Open Modal</button>
event script
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).attr('id');
alert(id);
});
});
Working Example
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).attr('id');
alert(id);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" id='2'>Open Modal</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" id='3'>Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<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>
<button type="button" class="btn btn-info btn-lg" id='2' ng-click="get_id_function(2)" data-toggle="modal" data-target="#myModal">Open Modal</button>
<button type="button" class="btn btn-info btn-lg" id='3'
ng-click="get_id_function(3)" data-toggle="modal" data-target="#myModal">Open Modal</button>
In javasscript
$scope.get_id_function(id){}
thus you can receive id in the function parameter id
Related
Please how can i make centralized these 3 buttons and the last button be centralized on the next line without affecting the whole framework.
<div class="col-md-4 col-12 col-lg-3 center-search">
<div class="">
<button (click)="searchEmployeeName()" class="btn btn-raised mr-1 shadow-z-2 btn-success btn-sm">
{{'Search' | translate}}
</button>
</div>
<div class="">
<button (click)="reset()" class="btn btn-raised mr-1 shadow-z-2 btn-warning btn-sm ml-1">
{{'Reset' | translate}}
</button>
</div>
<div class="">
<button (click)="viewAll()" class="btn btn-raised mr-1 shadow-z-2 btn-info btn-sm ml-1">
{{'View All' | translate}}
</button>
</div>
<div class="">
<button (click)="exportToExcel()" class="btn btn-raised mr-1 pull-rightshadow-z-2 btn-danger btn-sm ml-1">
{{'Export To Excel' | translate}}
</button>
</div>
</div>
Add another div:
<div class="col-md-4 col-12 col-lg-3 center-search">
<div class="d-flex justify-content-center">
<div class="">
<button (click)="searchEmployeeName()" class="btn btn-raised mr-1 shadow-z-2 btn-success btn-sm">
{{'Search' | translate}}
</button>
</div>
<div class="">
<button (click)="reset()" class="btn btn-raised mr-1 shadow-z-2 btn-warning btn-sm ml-1">
{{'Reset' | translate}}
</button>
</div>
<div class="">
<button (click)="viewAll()" class="btn btn-raised mr-1 shadow-z-2 btn-info btn-sm ml-1">
{{'View All' | translate}}
</button>
</div>
<div class="">
<button (click)="exportToExcel()" class="btn btn-raised mr-1 pull-rightshadow-z-2 btn-danger btn-sm ml-1">
{{'Export To Excel' | translate}}
</button>
</div>
</div>
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 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>
why my modal don't appears when I clik in my link?
I do like this and I don't know where is wrong?
In my table, my Edit button is a dropdown button because I have two Entity joined in this table, so when I click in the link who edited one of my entity the modal don't appears, the page becomes fade only.
edit.html.twig
<a data-toggle="modal" href="#edit{{ fruit.id }}">
Edit
</a>
<div class="modal" id="edit{{ fruit.id }}">
{{ form_start(edit_form, { 'method' : 'post', 'action': path('fruit_edit', { 'id' : fruit.id }) }) }}
<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">Edit</h4>
</div>
<div class="modal-body">
{{ form_widget(edit_form) }}
<input type="submit" value="Edit" />
</div>
</div>
{{ form_end(edit_form) }}
</div>
index.html.twig
<td>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle btn-xs" type="button" data-toggle="dropdown">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>{{ render(controller('AppBundle:Fruit:edit', { 'id' : fruit.id } )) }}</li>
<li>href="#">Categories</a></li>
</ul>
</div>
Controller
public function editAction(Request $request, Fruit $fruit)
{
$deleteForm = $this->createDeleteForm($fruit);
$editForm = $this->createForm('AppBundle\Form\FruitType', $fruit);
$editForm->handleRequest($request);
if ($editForm->isSubmitted() && $editForm->isValid()) {
$this->getDoctrine()->getManager()->flush();
return $this->redirectToRoute('fruit_edit', array('id' => $fruit->getId()));
}
return $this->render('fruit/edit.html.twig', array(
'fruit' => $fruit,
'edit_form' => $editForm->createView(),
'delete_form' => $deleteForm->createView(),
));
}
Help me please to show what the problem, thanks!
You can try just move your <div class="modal" ... ></div> container outside the <ul></ul> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle btn-xs" type="button" data-toggle="dropdown">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a data-toggle="modal" href="#edit5">
Edit
</a>
</li>
<li>Categories</li>
</ul>
<div class="modal" id="edit5">
<form>
<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">Edit</h4>
</div>
<div class="modal-body">
<input>
<input type="submit" value="Edit" />
</div>
</div>
</form>
</div>
</div>
So...
edit.html.twig
<div class="modal" id="edit{{ fruit.id }}">
{{ form_start(edit_form, { 'method' : 'post', 'action': path('fruit_edit', { 'id' : fruit.id }) }) }}
<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">Edit</h4>
</div>
<div class="modal-body">
{{ form_widget(edit_form) }}
<input type="submit" value="Edit" />
</div>
</div>
{{ form_end(edit_form) }}
</div>
index.html.twig
<td>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle btn-xs" type="button" data-toggle="dropdown">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a data-toggle="modal" href="#edit{{ fruit.id }}">
Edit
</a>
</li>
<li>href="#">Categories</a></li>
</ul>
{{ render(controller('AppBundle:Fruit:edit', { 'id' : fruit.id } )) }}
</div>
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