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
Related
When I try to click the emp['rec_no'] value, it does not display the content of rec_no, my modal window is empty. The content of $rec_no should display inside the modal window.
Thank you so much for your help in advanced
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">Reservation Details</h4>
</div>
<div class="modal-body">
<?php
$rec_no = $_GET['rec_no'];
$alumni_open = "SELECT * FROM reservation WHERE rec_no = '$rec_no'";
$alumni_query = mysqli_query($connector,$alumni_open) or die
(mysqli_error());
$row = mysqli_fetch_array($alumni_query);
echo $row['rec_no']; ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- MODAL END -->
<!--TRIGGER WHERE THE USER WILL CLICK THE VALUE OF $emp['rec_no'] -->
<a href="#myModal<?php echo $emp['rec_no'];?>" data-toggle='modal' data-
target='#myModal'><div align="center"><div class="glyphicon glyphicon-remove"
style="color:#FFFFFF"></div>
Hi I'm a super begginer in web developing. I need to take my table ID to a modal in order to delete the mySQL record. This is my code:
<?php while($llenartabla = $getsibella->fetch_assoc()) { ?>
<tr>
<th scope="row"><?=$llenartabla['id']?></th>
<td><?=$llenartabla['date']?></td>
<td><?=$llenartabla['location']?></td>
<td><?=$llenartabla['city']?></td>
<td><button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">Delete</button></td>
</tr>
<?php }?>
And here is my code for the modal:
<!-- Modal -->
<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>
<h4 class="modal-title" id="myModalLabel">Delete</h4>
</div>
<div class="modal-body">
Are you sure you want to delete the event?
</div>
<div class="modal-footer">
Delete
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I know it's kind of an easy question, but I'm learning bootstrap and php haha. So any answers or comments are welcome :p
Here's a newbie solution for you:
<?php while($llenartabla = $getsibella->fetch_assoc()) { ?>
<tr>
<th scope="row"><?=$llenartabla['id']?></th>
<td><?=$llenartabla['date']?></td>
<td><?=$llenartabla['location']?></td>
<td><?=$llenartabla['city']?></td>
<td><button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal<?=$llenartabla['id']?>">Delete</button></td>
</tr>
<?php }?>
just changed the following part: data-target="#myModal<?=$llenartabla['id']?>"
As for modal: again wrapped around the same loop with changed id of modal id="myModal<?=$llenartabla['id']?>" and your delete url modified delete.php?id=$llenartabla['id']
<?php while($llenartabla = $getsibella->fetch_assoc()) { ?>
<div class="modal fade" id="myModal<?=$llenartabla['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">Delete</h4>
</div>
<div class="modal-body">
Are you sure you want to delete the event?
</div>
<div class="modal-footer">
Delete
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php }?>
Now if you want the advance solution you need javascript.
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 would like that when clicking the button it presents the data-id in the modal.
<button data-id="$id" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">OPEN</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">Modal title</h4>
</div>
<div class="modal-body">
<?PHP echo $id; ?>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
I tried several tutorials and it did not work, will it be the jquery version?
How do I print the ID within the modal?
You can create an event on your button.
var myBtn = document.getElementByClassName("btn");
myBtn.addEventListener("click", function() {
var dataId = document.getElementByClassName("btn").dataset.id;
console.log(">>>>dataId: ", dataId);
document.getElementByClassName("modal-body").innerHTML = dataId;
});
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>