I am trying to display modal when user click on link and set parameter, but nothing happens and I don't know why this code doesn't work. Somebody to help ? Thanks
<div class="container-fluid" style="margin: 0 auto; width: 50%">
<div class='btn-group'>
<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false' style='background-color: #4076BC; color: #fff;'>
Action<span class='caret'></span>
</button>
<ul class="dropdown-menu">
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
</div>
<?php
if (isset($_REQUEST["deleteUser"])) {
echo '<div id="exampleModal" class="modal fade" tabindex="-1" role="dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>';
}
?>
if you put modal code inside php if condition then it will not be inserted in the DOM. Place the modal code as it is. It will not display. Use Jquery to detect click or you can insert display block class in modal to show it and also use jquery to set form values to delete
Related
I have a list of categories, from where I want to pass {{category.name}} to data into Bootstrap modal.
I want to achieve that when I click on the specific button, to show the name of the category in the modal as a message?
Categories
<div class="card mt-2">#foreach($categories as $category)
<ul class="list-group list-group-flush">
<li class="list-group-item">{{ $category->name}}
<a href="" class="btn btn-danger btn-sm ml-2 float-right"
onclick="handleDelete({{$category->id}})">Delete</a>
Edit
</li>
</ul>
#endforeach
</div>
From where I've tried to pass {{$category->name}} into div element, but It showing the last element from the loop.
Modal
<form action="" method="POST" id="deleteCategoryForm">
#csrf
#method('DELETE')
<div class="modal fade" id="deleteModalCenter" tabindex="-1" role="dialog" aria-labelledby="deleteModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Delete category</h5>
<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 "{{$category->name}}" ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Go Back</button>
<button type="submit" class="btn btn-danger">Yes, Delete</button>
</div>
</div>
</div>
</div>
</form>
JS Script
<script>
function handleDelete(id){
event.preventDefault();
var form = document.getElementById('deleteCategoryForm');
console.log('Delete', form);
form.action = '/categories/' + id;
$('#deleteModalCenter').modal('show');
}
</script>
Thanks in advance
I want to write a php function to generate a Bootstrap modal so I can simply call it to create more modals. Thus reducing code repetition. My first approach was to store all the HTML within a Variable and then return it as shown in the function below.
function modal(){
$build = ' <button type=button class="btn btn-primary" data-toggle="modal" data-target="modal-xl">
Test Modal
</button>';
$build .= ' <div class="modal fade" id="modal-xl">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extra Large Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>';
return $build;
}
And then to generate it I would simply do
<?=modal()?>
My problem with this approach is that although the code is inserted inside my page, I can't seem to be able to open the modal in question.
Anyone has some though? or alternative way of doing so?
I was hoping to create a Builder class for various components like this one.
Alright for modals, I manage to get it working by using a javascript trigger instead.
function modal(){
$build = ' <button type=button class="btn btn-primary" id="btn-xl">
Test Modal
</button>';
$build .= ' <div class="modal fade" id="modal-xl">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extra Large Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>';
$build .= ' <script>
$(document).ready(function(){
$("#btn-xl").click(function(){
$("#modal-xl").modal();
});
});
</script>
';
return $build;
}
Hopefully I won't have to trick bootstrap like this with all other components.
PS. Make sure to load JQuery and Bootstrap Javascript before echoing the function.
I'm generating dynamic links but when I click a link the modal window is opening behind the faded div so that I can't then click anything. Any idea how I can make it appear on top so that it can be closed?
Also how can I stop the page from jumping to top when clicking one of the links? I want the scroll position to stay the same so that you don't have to try and find out where you were on the page. Any help appreciated.
<script>
function showModal(el) {
jQuery("#myModalLabel").text(el.title);
jQuery("#myModal").modal()
}
</script>
<a href="#" id="mymodal" onclick="showModal(this)" style="font-size:16px;"
title="<? echo $row ['title'] ?>
by
<? echo $row ['author'] ?>" ><? echo $row ['first_line'] ?> </a>
<div class="modal fade" id="myModal" 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>
</div>
<div class="modal-body">
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
Fixed. Just needed to move outside containers to just before the closing body tag
Try this one dude
HTML
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" id="yourModal" data-target="#myModal" data-title='<? echo $row ["title"] ?> by <? echo $row ["author"] ?> '><? echo $row ['first_line'] ?></button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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" id="myModalLabel">Modal title</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>
javascript (jquery)
<script>
$(document).on("click", "#yourModal", function () {
var title = $(this).data('title');
$("#myModalLabel").val( title );
});
</script>
I have a form that I submit using a bootstrap button, I have a modal that I link to in order to print using another button. I want the printer button to save the form like the submit button does, but instead of redirecting to another page, it should redirect to the print modal (So the print contents are up to date).
This is my code I have that submits/prints currently. If I make changes to a loaded form, the print button will only print the prior form.
<!-- Save Project -->
<div class='form-group text-center'>
<input data-loading-text="Saving Project..." type="submit" name="invoice_btn" value="Save Project" class="btn btn-success submit_btn invoice-save-btm" />
<!-- Print Project -->
<div style="position:absolute; left:500px; top:200px;"><a title="Print Invoice" class="print_class" role="menuitem" tabindex="-1" data-uuid="<?php echo isset($invoice['Invoice']['uuid']) ? nl2br( $invoice['Invoice']['uuid'] ): ''; ?>" href="javascript:;"> <i class="fa fa-print fa-4x"></i><br>Print</a></div>
</div>
</div>
Modal Print :
<!-- Modal Print -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:900px;height:auto">
<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">Print Proposal</h4>
</div>
<div class="modal-body" id="print_content">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="printBtn" onclick="printInvoice('print_content')" class="btn btn-primary" data-loading-text="Printing...">Print</button>
</div>
</div>
</div>
</div>
I have a page where I want to launch 2 different modal windows. One for creating new users and one for editing existing users.
I show existing users in a clickable table and link to my modal #edit like this:
<tr data-id="<?php echo $value['id'];?>" data-toggle="modal" data-target="#edit" class="open-edit">
This opens my Bootstrap modal dialog:
<div class="modal fade" id="edit">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
I ommited the rest of the code.. I grab this modal on its id="edit".
This works like I want - when clicking on the table entry, the modal dialog gets opened with a form I created.
Now I created an exact copy of this modal dialog, only changed the id="edit" to id="create" and created this button:
<button class="btn btn-primary btn-me" data-toggle="modal" data-target="#create" >Create user<i class="fa fa-arrow-circle-right"></i></button>
I would think that it would now simply open my second modal dialog named #create, but instead it blanks out the screen, like when a modal dialog shows - but without showing any modal window/dialog.
Can anyone help me understand why this is happending or what I am doing wrong?
this code open 2 modal dialogs in the same page
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal2">modal2</button>
<div class="modal hide fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<div class="modal hide fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
you need to put it on two different div and it will work , i fixed it