I have an array of locations that when a users clicks on that card it should show a modal with that specific locations data
How do I pass the data to the modal?
<!-- Card -->
<div class="locationCard" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#exampleModal" >
<div class="locationText">
<?php echo $slide['title']; ?>
</div>
<?php echo '<img class="cardImage" >' . wp_get_attachment_image( $slide['image'], $size = 'medium',["class" => "cardImage","alt"=>"some"]) . '</img>'; ?>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" 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"><?php echo $slide['title']; ?></h5>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
Related
I need to add a modal popup to the following web app:
https://github.com/gunet/openeclass/tree/3.12.x
<div class="modal fade" id="wizardmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Property</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Smart Wizard HTML -->
<div id="smartwizard">
<ul>
<li>Step 1<br /><small>Add Property</small></li>
<li>Step 2<br /><small>Type of Property</small></li>
</ul>
<div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
I'm using modal show.
$(window).on('load',function(){
$('#wizardmodal').modal('show');
});
In which file and which line should i add the above?
I have tried adding the above in index.php but nothing shows up
I can see from your code you're running bootstrap version 4. Here's a link to the documentation for how to use a modal https://getbootstrap.com/docs/4.6/components/modal.
I added a little modification to your code to get it to run. Check it below.
$(window).on('load',function(){
$('#wizardmodal').modal('show');
});
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<div class="modal fade" id="wizardmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Property</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×<span>
</button>
</div>
<div class="modal-body">
<!-- Smart Wizard HTML -->
<div id="smartwizard">
<ul>
<li>Step 1<br /><small>Add Property</small></li>
<li>Step 2<br /><small>Type of Property</small></li>
</ul>
<div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
After searching a lot, doing lots of debugging, and I figured out that inside slick carousel div, the bootstrap modal is not displaying. Only showing a gray dropback.
Here is code: In this code, we are getting details from the database and with slick showing images and when someone clicks on those images it will open a modal for that image. But everything is fine except this. How to call the modal inside slick div.
Thank you in advance
<?php
$ush = $mysqli->prepare("SELECT company_id, img, name from list");
$ush->execute();
$ush->store_result();
$ush->bind_result($u_bid, $u_bimg,$u_bname);
?>
<div class="company-logo">
<?php
while($ush->fetch()){
?>
<div>
<a href="#<?php echo $u_bid;?>" data-toggle="modal" data-target="#<?php echo $u_bid;?>"><img
src="data:image/png;base64,<?php echo base64_encode($u_bimg); ?>" height="80px" width="80px"></a>
<!-- Modal -->
<div class="modal" id="<?php echo $u_bid;?>" tabindex="-1" role="dialog" aria-labelledby="<?php echo $u_bid;?>" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-md" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container text-center">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><h3><b>X</b></h3></span>
</button>
<h3><?php echo $u_bname;?></h3>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
$ush->close();
?>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.company-logo').slick({
dots:true,
infinite:false,
speed:300,
slidesToShow:14,
slidesToScroll:14,
arrows:false,
responsive:[{
breakpoint:768,
settings:{
slidesToShow:4,
slidesToScroll:4
}
}]
})
});
</script>
I think you should move the modal code parts outside of your carousel parts like this:
<?php
$ush = $mysqli->prepare("SELECT company_id, img, name from list");
$ush->execute();
$ush->store_result();
$ush->bind_result($u_bid, $u_bimg,$u_bname);
$carousel_content = '';
$modal_content = '';
while($ush->fetch()){
$carousel_content .= '<div>
<a href="#'.$u_bid.'" data-toggle="modal" data-target="#'.$u_bid.'"><img
src="data:image/png;base64,'.base64_encode($u_bimg).'" height="80px" width="80px"></a>
</div>';
$modal_content .= '<!-- Modal -->
<div class="modal" id="'.$u_bid.'" tabindex="-1" role="dialog" aria-labelledby="'.$u_bid.'" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-md" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container text-center">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><h3><b>X</b></h3></span>
</button>
<h3>'.$u_bname.'</h3>
</div>
</div>
</div>
</div>
</div>';
?>
<?php
}
$ush->close();
?>
<div class="company-logo"><?=$carousel_content?></div>
<div id="modal_contents"><?=$modal_content?></div>
<script type="text/javascript">
$(document).ready(function(){
$('.company-logo').slick({
dots:true,
infinite:false,
speed:300,
slidesToShow:14,
slidesToScroll:14,
arrows:false,
responsive:[{
breakpoint:768,
settings:{
slidesToShow:4,
slidesToScroll:4
}
}]
})
});
</script>
I have a small problem, I have to use the modal for 24 different cases, I have to get an id before going into the modal to test this id with the modal id and display the result in the modal. I do not know if I expressed well! but here is the code
<!-- Modal -->
<?php
$x=7;
$case = $fun -> getCaseByIde($x);
?>
<div id="myModal-<?php echo $x; ?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content" style="text-align: center;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1><?php echo $x; $case['titre']; ?></h1>
</div>
</div>
</div>
</div>
<!-- #END# Modal -->
<!-- Modal -->
<?php
$x=8;
$case = $fun -> getCaseByIde($x);
?>
<div id="myModal-<?php echo $x; ?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content" style="text-align: center;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1><?php echo $x; $case['titre']; ?></h1>
</div>
</div>
</div>
</div>
<!-- #END# Modal -->
<!-- Modal -->
<?php
$x=9;
$case = $fun -> getCaseByIde($x);
?>
<div id="myModal-<?php echo $x; ?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content" style="text-align: center;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1><?php echo $x; $case['titre']; ?></h1>
</div>
</div>
</div>
</div>
<!-- #END# Modal -->
It seems that you're manually creating all your 24 modals?
Try using a for loop:
<?php
$modalCount = 24; // Number of modals you want to create. (Nombre de modals à créer)
// Create a modal from 0 to 23. (Créer un modal de 0 à 23)
// Use "$x = 1" and "$x <= $modalCount" if you want from 1 to 24. (Utilise ... si tu veux de 1 à 24)
for ($x = 0 ; $x < $modalCount ; $x++): ?>
<!-- Modal -->
<?php $case = $fun->getCaseByIde($x); ?>
<div id="myModal-<?php echo $x; ?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content" style="text-align: center;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1><?php echo $x; $case['titre']; ?></h1>
</div>
</div>
</div>
</div>
<!-- #END# Modal -->
<?php endfor; ?>
If it is not your problem, please, be more precise.
I implemented bs4, but on the modal I have a problem. In bs4 the code work but the data is not inserted. it's like a blank page.
In this case, the value of $cInfo->configuration_title, does'nt appear.
<a data-toggle="modal" data-refresh="true" href="configuration_popup.php?<?php echo 'gID='. $_GET['gID'] . '&cID=' . $Qconfiguration->valueInt('configuration_id'); ?>" data-target="#myModal_<?php echo $Qconfiguration->valueInt('configuration_id'); ?>"><?php echo HTML::image (DIR_WS_ICONS . 'edit.gif', ICON_EDIT) ?></a>
<div class="modal fade" id="myModal_<?php echo $Qconfiguration->valueInt('configuration_id'); ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="dialog">
<div class="modal-content" style="padding:10px 10px 10px 10px;">
<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"><?php echo $cInfo->configuration_title; ?></h4>
</div>
<div class="modal-body">
<div class="te"></div>
</div>
</div> <!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I am looping a DIV with foreach loop. my PHP looks like this:
<?php foreach ($record as $row) { //looping the records ?>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<h4><?php echo get_userdetails_byid($row['user_id']); ?></h4>
</div>
</div>
<?php } ?>
And the modal always show the first entry of the loop.. however in the html source code i can see all the records. How do i trigger each result individually?
data-target="#myModal" will use the id attribute. And multiple elements can not have the same id. Use different id for different modal.
<?php
$i = 0;
foreach ($record as $row) { //looping the records
?>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal<?php echo $i;?>">
Launch demo modal
</button>
<div class="modal fade" id="myModal<?php echo $i;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<h4><?php echo get_userdetails_byid($row['user_id']); ?></h4>
</div>
</div>
<?php
$i++;
}
?>