I am trying to open bootstrap pop for every row in table .It works if I keep the
onclick event in loop and pop up window in loop for getting different id ie photoModal.But for some reason i have to keep the pop up window out of loop.
<!-- Image toggle box start-->
<div class="bs-example">
<div id="photoModal" class="modal fade">
<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">rudra pop 2 </h4>
</div>
<div class="modal-body"> <img src="<?php echo URL;?>images/decor/Int-Design2.jpg" style="max-width:100%; " /> </div>
</div>
</div>
</div>
</div>
<!-- End Image toggle box start-->
<a href="#" data-toggle="modal" data-target="#photoModal" data-title="Feedback"
style="border:none !important; text-decoration:none !important;">
<div class="tz-image-item">
<img alt="" src="images/decor/Int-Design1.jpg">
</div>
</a>
Use Javascript to open your modal dialog. That should help you.
$(document).ready(function() {
$('tr').on('click', function(ev) {
$('#my-modal').modal('show');
});
});
Related
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 am implementing In-line sharethis buttons in a bootstrap modal.
ShareThis button are working fine on a rendered page.
But, they are not appearing on modal.
When I inspect the modal code or change the height of the inspect window, ShareThis buttons appears on modal.
I think this happening because inspect window changes the layout of the page.
JS link included in header
<script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#product=custom-share-buttons"></script>
This is the code of modal:
<div class="modal fade" id="inviteFriendsModal" tabindex="-1" role="dialog" aria-labelledby="inviteFriends" style="display: none;">
<div class="modal-dialog " id="primary-header-modal" role="document" style="margin: 8% auto; width: 670px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close alert-close-icon" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Invite Friends, get {{INVITE_EARNED_REWARD}} points</h4>
</div>
<div class="modal-body bg-grayf2f2f2">
<div class="row margin0 text-center">
<img src="{{ asset('images/inviteFriends.png') }}" height="100px" class="margin-bottom20">
<p class="font18">SHARE YOUR CODE</p>
<p><span class="font18 font-wt400" style="color: #1fbad6;">{{Session::get('invitationCode')}}</span></p>
<p class="padd-bottom15">Your friends get {{INVITE_EARNED_REWARD}} points when they join and you get {{INVITE_EARNED_REWARD}} too, after their first interaction.</p>
<div class="text-center">
<div class="sharethis-inline-share-buttons" data-description='{{ $stSummary }}' data-url='{{ $stUrl }}' data-message="{{trans('interviewerMessages.inviteFriendsStSummary')}}" data-short-url="{{ $stUrl }}" data-title="{{ trans('messages.ogTitle') }}"></div>
</div>
</div>
</div>
</div>
</div>
Also, I have created a test url for more clarification:
URL
Please help me on this issue that sharethis buttons should appears on modal on beforehand.
I am trying to display a modal when pressing the button "Vezi rezolvare"
I have the following code for the button:
<div class="col-md-4 text-center patrat-block">
<div class="thumbnail">
<img class="img-responsive" src="img/LogoProbleme/pg1logo-v2.jpg" alt="">
<div class="caption">
<h3>Problema 1<br>
<small>Gradina</small>
</h3>
<p>Află dimensiunile grădinii</p>
<ul class="list-inline">
<li>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Problema"><span class="glyphicon glyphicon-pencil"></span> Vezi Rezolvare </button>
</li>
</ul>
</div>
</div>
</div>
And the modal content + php :
<?php
if(isset($_GET['id'])&&isset($_GET['category']))
{
$id=$_GET['id'];
$category=$_GET['category'];
$sql = "SELECT cerinta, rezolvare FROM probleme WHERE id='".$id."'AND category='".$category."'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc())
{
$cerinta=$row["cerinta"];
$rezolvare=$row["rezolvare"];
}
$_SESSION["cerinta"]=$cerinta;
$_SESSION["rezolvare"]=$rezolvare;
}
}
?>
<div id="Problema" 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">Problema</h4>
</div>
<div class="modal-body">
<h4>Cerinta</h4>
<div class="well">
<?php echo $cerinta;?>
</div>
<h4>Rezolvare</h4>
<div class="well">
<?php echo $rezolvare;?>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Inchide fereastra</button>
</div>
</div>
</div>
</div>
What this is trying to accomplish is to show a modal with some information in my database. I checked and the values are stored successfully in $cerinta and $rezolvare.
It seems like when the button is pressed, there is a fast fade and I am redirected to the top of the page, without showing the modal. I put an <a href="probleme.php?id=1&category=g"> so I know what button has been pressed, but it seems like it refreshes the page and the modal isn't displayed. How can I let the modal be displayed?
Nesting a <button> inside an achor <a> is not valid html syntax because it can't tell which one was clicked. Also the anchor has an href different than '#' so it's just redirecting you to probleme.php?id=1&category=g. You can modify your code as follows (not tested):
Remove the button from inside the anchor and change the anchor to:
<a href="probleme.php?id=1&category=g" class="btn btn-primary"
data-toggle="modal" data-target="#Problema">
<span class="glyphicon glyphicon-pencil"></span> Vezi Rezolvare
</a>
Have the template of the modal somewhere in your html:
<div id="Problema" 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">Problema</h4>
</div>
<div class="modal-body">
Some fine body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Inchide fereastra
</button>
</div>
</div>
</div>
</div>
Modify your php to return only the body of the modal:
<?php
// Some good php
echo("
<h4>Cerinta</h4>
<div class=\"well\">
{$cerinta)}
</div>
<h4>Rezolvare</h4>
<div class=\"well\">
{$rezolvare}
</div>");
// The modal body is returned by php
?>
Use ajax to retrieve the modal body and subsequently open the modal. Something in the lines of:
$(document).ready(function() {
// Assign some id to the anchor say id="myAnchor"
$('#myAnchor1').click(function(e) {
e.preventDefault();
// get the modal
var modal = $($(this).data("data-target"));
var url = $(this).attr("href");
var request = $.get(url);
request.done(function(response) {
// get modal
modal.find(".modal-body").html(response);
modal.modal("show");
});
});
});
I really want that my Modal shows something based on which button inside it i press, but i have no idea of how to do this.
Actually i tried to use if(isset($_POST['buttoname'])
but looks like this dowsn't work `
This is my modal , i just want to place the content on the right side (which is white ) , but actually it doesn't work.
Here's the code i tried to use
<!-- Modal Settings -->
<div class="modal fade" id="Settings" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="background-color: #d9534f;color:white !important;text-align: center;font-size: 30px">
<button type="button" class="close" data-dismiss="modal" style="background-color: #d9534f;color:white !important;text-align: center;font-size: 30px">×</button>
<h4 style="background-color: #d9534f;color:white !important;text-align: center;font-size: 30px"><span class="fa fa-gear"></span> Settings</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="list-group col-sm-1">
<form method="post" href="#">
<button type="submit" name="Profile" href="#" class="list-group-item">First </button>
<button type="submit" name="Logins" href="#" class="list-group-item">First </button>
<button type="submit" name="Security" href="#" class="list-group-item">First </button>
</form>
</div> <!-- List -->
</div>
<?php
if(isset($_POST['Profile'])){
echo' <div class="container">
<div class="col-sm-11">
<p> This is a test</p>
</div>
</div>';
}
?>
</div>
<div class="modal-footer" style="background-color: #f9f9f9;">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
</div>
</div>
</div>
<!-- Modal Settings -->
You need to actually post the button click to have it stored in the $_POST. So just leave the form action empty and it will post this form to the url you already are in.
But this will refresh the page so if you want to make it without refreshing you will need to use javascript.
For example if you are using jquery and you are if you are using bootstrap
In you html put some placeholder div instead of this php if:
</div> <!-- List -->
</div>
<div id="placeholder"></div>
</div>
And in your javascript code:
$("button[name='Profile']").click(function() {
$("#placeholder").html("YOUR HTML CODE");
});
I have few thumbs on the page which are loaded from mysql database. Now I want to make button view on them and when I click to open modal windows with more info.
The problem is that always is opening first item on each thumb(different id). This is what I've using. I guess the problem is in the button but can't figured out how to fix it.
foreach($pdo->query("SELECT * FROM projects ORDER BY project_id") as $row)
{
echo '<div class="portfolio-item '.$row['project_category'].'">';
echo '<div class="portfolio">';
echo '<a href="#" data-lightbox-gallery="portfolio">';
echo '<img src="'.$row['project_image'].'" alt="Portfolio 1">';
echo '<div class="portfolio-overlay hvr-rectangle-out">';
echo '<h2 class="margin-bottom-small">
<strong class="white-color bold-text"></strong>
</h2>';
echo '<div class="button" data-toggle="modal" data-target="#portfolio-4">View More</div>';
echo '</div><!-- END PORTFOLIO OVERLAY -->
</a>
</div>
<div class="modal fade contact-form" id="portfolio-4" tabindex="-1" role="dialog" aria-labelledby="portfolio-4" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-body member-info">
<div class="row">
<div class="col-md-5 col-sm-5">
<figure>
<img src="'.$row['project_image'].'" alt="">
</figure>
</div>
<div class="col-md-7 col-sm-7">
<div class="description">
<h3><strong class="bold-text">'.$row['project_overlay'].'</strong></h3>
<div class="light-text">'.$row['project_title'].'</div>
<div class="about margin-top-medium">
<p>'.$row['project_details'].'</p>
</div>
</div> <!-- *** end description *** -->
</div> <!-- *** end col-md-7 *** -->
</div> <!-- *** end row *** -->
</div> <!-- *** end modal-body *** -->
</div> <!-- *** end modal-content *** -->
</div> <!-- *** end modal-dialog *** -->
</div> <!-- *** end Contact Form modal *** -->
</div> <!-- *** end portfolio-item *** -->';
}
At a simple glance (I can't tell what plugin you are using) I would check this line : ... div class="modal fade contact-form" id="portfolio-4"
the button triggers this modal data-target="#portfolio-4">
So I would get the index of every row and append it to the id of the modal, then in the button data-target I would also append that index... (so IDs are different) Hope it helps, I did the same but using bootstrap.