i am making a function is when customer click the quickview button it will be open the modal have a infomation about that product, but i don't know how to do this, i try some method but not working, so please help me.
This is my view :
<div class="row">
<h4>Feauture Product</h4>
</div>
<form method="post">
<div class="row">
<div class="product">
<?php foreach ($infolist as $info_key){ ?>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://wingsacessorios.com.br/public/img/vertical/img-home05.jpg" class="img-responsive">
<div class="caption">
<h5 class="text-justify">Name product: <?php echo $info_key->name; ?></h5>
<p class="text-justify">Price: <?php echo $info_key->price.' VNĐ'; ?></p>
<p class="text-center"> </i> Buy Now<i class="fa fa-eye" aria-hidden="true"></i> Quick View</p>
</div>
</div>
</div>
<?php }?>
</div>
<!-- Small modal alert when click add cart -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header" style="padding:5px 10px 5px 10px;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel" style="background-color:transparent;color:#000000;">Alert from website !</h4>
</div>
<div class="modal-body">
<h5>Added product to your cart!</h5>
</div>
</div>
</div>
</div>
<!-- Modal quickview -->
<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">Modal title</h4>
</div>
<div class="modal-body">
</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 i put modal quickview code in for each loop it just display infomation of first product
To open what you have above you'll need to open the modal with
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
pay special attention to the 'data-target'. that must match the ID of your modal div:
<div class="modal fade" id="myModal"... <---
If you have multiple products on the same page your best bet will be to generate modals programmatically with Bootstrap JS Modal.js plugin
http://getbootstrap.com/javascript/#modals
edit
This is one way to do what I believe you're looking for. I may have missed a variable echo, but the basics are there.
<?php foreach ($infolist as $info_key): ?>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://wingsacessorios.com.br/public/img/vertical/img-home05.jpg" class="img-responsive">
<div class="caption">
<h5 class="text-justify">Name product: some product</h5>
<p class="text-justify">Price: 12 VND</p>
<p class="text-center"> </i> Buy Now <i class="fa fa-eye" aria-hidden="true"></i> Quick View</p>
</div>
</div>
</div>
<!-- Small modal alert when click add cart -->
<div class="modal fade bs-example-modal-sm" id="cartModal<?php echo $info_key->id; ?>" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header" style="padding:5px 10px 5px 10px;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel" style="background-color:transparent;color:#000000;">Alert from website !</h4>
</div>
<div class="modal-body">
<h5>Added product <?php echo $info_key->id; ?> to your cart!</h5>
</div>
</div>
</div>
</div>
<!-- Modal quickview -->
<div class="modal fade" id="myModal<?php echo $info_key->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">
<p>Product <?php echo $info_key->id; ?></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>
<?php endforeach ?>
Related
I want to give extra data of my card in modal where I'm trying to access card id and their data in the modal of the same card.
but I tried the same PHP code into modal but it gave me data of every id in one modal just because I didn't specify the accurate id.
This is my card code:
<?php
$postquery="SELECT * FROM card";
$run=mysqli_query($db,$postquery);
?>
<section>
<div class="container1">
<?php
while($card=mysqli_fetch_assoc($run)){
?>
<div class="container__card">
<div class="container__card--content">
<img src="../images/<?=getcardimagesinfo($db,$card['id'])?>" style="width:100%;
height:100px !important"/>
<h3><?=$card['Name']?></h3>
<h3><?=$card['id']?></h3>
<button type="button" id="modalss" class="a modalss" data-bs-toggle="modal" data-bs-
target="#exampleModal">Start</button>
</div>
</div>
<?PHP
}
?>
</div>
This one is my modal
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-
hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-light" id="exampleModalLabel">Card full Information</h5>
<button type="button" class="btn-close" data-id data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body" style="color:white;">
<?PHP
while($card=mysqli_fetch_assoc($run)){
?>
<h6>Description: <?=$card['Description']?></h6>
<h6>Hint: <?=$card['hints']?></h6>
<?php
}
?>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary">Save</button>
</div>
</div>
</div>
</div>
First of all render all of your cards:
<?php
$postquery="SELECT * FROM card";
$run=mysqli_query($db,$postquery);
$allCards = [];
while($card=mysqli_fetch_assoc($run))
{
$allCards[] = $card;
}
?>
<section>
<div class="container1">
<?php
foreach($allCards as $card){
$cardId = $card['id'];
$img = getcardimagesinfo($db,$cardId);
?>
<div class="container__card">
<div class="container__card--content">
<img src="../images/<?=$img?>" style="width:100%; height:100px !important" alt="Image of card"/>
<h3><?=$card['Name']?></h3>
<h3><?=$card['id']?></h3>
<button id="card-<?=$cardId?>" type="button" class="a modalss"
onclick="updateModalContent(this)"
data-bs-toggle="modal" data-bs-target="#exampleModal">
Start
</button>
</div>
</div>
<?php } ?>
</div>
</section>
Then embed your modal at the bottom of your page content.
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-light" id="exampleModalLabel">Card full Information</h5>
<button type="button" class="btn-close" data-id data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body" style="color:white;">
<h6>Description: <span id="modal-card-description"></span></h6>
<h6>Hint: <span id="modal-card-hint"></span></h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary">Save</button>
</div>
</div>
</div>
</div>
Finally add JavaScript section at the bottom to handle updating data in the modal window:
<script>
// This contains all cards info as Json object in javascript when the page is loaded
var allCards = <?php echo json_encode($allCards);?>;
// Button click handler
function updateModalContent(clickedButton)
{
let cardId = clickedButton.id.split("-")[1];
let thisCardInfo = allCards[cardId];
document.getElementById('modal-card-description').innerHTML = thisCardInfo.description;
document.getElementById('modal-card-hints').innerHTML = thisCardInfo.hints;
// and so on ....
}
</script>
In the site that I am developing, I want to delete the selected image, but it always deletes the last image and not the chosen image. Can someone solve this problem? Thank you!
All the code in this link
https://pastebin.com/tpQnMwfY
<div class="col-sm-6 col-md-4 col-lg-2">
<br>
<div id="imagem_galeria"><a class="fancybox" href="upload/bairro_galeria/<?php echo $row['imagee']; ?>" data-fancybox-group="gallery"><img src="upload/bairro_galeria/<?php echo $row['imagee']; ?>" class="image-responsive"></a></div>
<br>
<div class="row">
<div class="col-sm-6" align="right"><a href="admin_bairro_galeria_editar?update_id=<?php echo $row['id']; ?>" class="btn btn-warning btn-sm custom-btn" >Editar</a></div>
<div class="col-sm-6" >Eliminar
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Pretende mesmo eliminar?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning custom-btn" data-dismiss="modal">Cancelar</button>
<a href="?delete_id2=<?php echo $row['id']; ?>" class="btn btn-danger custom-btn" >Eliminar</a>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
</div>
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 this link where i open modal:
<li><i class="fa fa-times"></i></li>
And i have modal in seperate page modals.blade.php
<div class="modal fade modal_form" id="deleteProperty{{$property->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel5" aria-hidden="true">
<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="exampleModalLabel5">Are you sure you want to delete this property?</h4>
</div>
<div class="modal-body">
<form method="POST" action="{{ route('user.property.delete',[$user->id,$property->id])}}">
<div class="form-group">
<div class="left-btn">
<button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
</div>
<div class="right-btn">
<button type="submit" class="btn btn-primary">Yes</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
How can i pass this parameter ($property->id) to modal so when user click on specific property, to delete that property?
You need to pass the variables you want to use in the included views.
Example:
#include('standardUser.includes.modals', [ "property" => $property ])
I don't know what's wrong with the code, but i get the different result for the same query.
My select query (in the controller):
$this->db->select('*');
$this->db->from('vendor_location');
$query = $this->db->get();
$data['location'] = $query->result_array();
My partial view (modal bootstrap):
<div class="modal fade" id="add_driver_modal" 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">ADD DRIVER</h4>
</div>
<div class="modal-body" id='add'>
<div class="row" id="add_driver_form">
<?php var_dump($location);?>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="add" type="button" class="btn btn-primary btn-md" onclick=add_driver()>Add</button>
</div>
</div>
<div id="form_submit_result"></div>
</div>
</div>
<!-- Edit driver modal -->
<div class="modal fade" id="edit_driver_modal" 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">EDIT DRIVER</h4>
</div>
<form method="post" action="<?php echo base_url(); ?>portal/edit_driver">
<div class="modal-body" id='add'>
<div class="row" id="edit_driver_form">
<?php var_dump($location);?>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="save" type="submit" class="btn btn-primary btn-md">Save</button>
</div>
</div>
</div>
</div>
When I var_dump($location) in the add_driver_modal, I get the expected result (all records from vendor_location table). But I just get the last record (one row) in the edit_driver_modal. How could this happen?