I'm trying to display a Bootstrap Modal on my webshop when the mouse hovers over a product. I searched online and found the following:
https://stackoverflow.com/a/12190456/3164891
I got it to work in the Fiddle by adding the following code:
$('#openBtn').hover(function () {
$('#modal-content').modal({
show: true
});
});
But when I want to apply it to my situation I can't get it to work
HTML
<li class="item">
<a href="#" data-toggle="modal" data-trigger="hover" data-target="#basicModal-<?php echo $_product->getId()?>" class="product-image" id="<?php echo $_product->getId() ?>">
<img id="product-collection-image-<?php echo $_product->getId(); ?>" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($_imgSize); ?>" />
</a>
</li>
<div class="modal fade" id="basicModal-<?php echo $_product->getID()?>" role="dialog" aria-hidden="true" data-trigger="hover">
<div class="modal-content">
Modal Content
</div>
</div>
Calling the modal
jQuery('.item').hover(function () {
jQuery('#basicModal').modal({
show: true
});
});
When I try it on my site the modal only shows when the a href is clicked and does nothing on hover. I've also tried the following code:
jQuery('#basicModal').modal({trigger: "hover"});
I'm using the following versions:
jQuery: 1.10.2.min
Bootstrap: 3.2.0
Your javascript code that is firing the modal on hover, it's not selecting the right element:
jQuery('#basicModal')
In the above line you are selecting an element with id === "basicModal", but in your html the id is equal to basicModal-<?php echo $_product->getID()?>. The two id strings must match, or you can use a jquery wildcard, like JQuery("[id^=basicModal]") that selects all elements with id sarting with basicModal.
Here is a working version of your code with the wildcard solution: http://jsfiddle.net/fcyafcgx/
Related
Please I'm new to coding and I have a project i am working on.
I have a php while loop code that diplay 5 posts
I also have a jQuery code to display modal for the while loop with post url
The problem I'm face here is that the displayed url is inside a div
<p id="url"></p> this show the url
I want to add it as url.
I have tried </p>'> Click to view
But the link will not show
I have tried echo it still not showing.
I have been on this for two days now
The modal that display the content is outside the while loop and working
I need help
My ajax code
<script>
function showModal(id)
{
$("#url").text($("#url_"+id).text());
}
</script>
Php loop code
`<?php
foreach ($posts as $key => $result) { ?>
<div href="#" data-toggle="modal" data-target="#myModal" onClick="showModal(<?php echo $id ; ?>)" class="side-icon share-btn">
<i class="fa fa-share share-icon"></i> View link
<?php } ?>
<div class="modal fade" id="myModal" role="dialog" >
<div class="modal-dialog" style="position:absolute;bottom:0;margin:0;width:100%;">
<div class="modal-content">
<div class="modal-header">
<center><h4>Share with friends</h4></center>
<?php $t='<p id="name"></p>';
$t1?>
. Click to view
</div>
`
The id containers the url from MySQL table
The issue I'm facing is that, <p id="url"></p> is just showing www. example.com as plain test on user view but can't make it work as link to click
A hyperlink a is not necessary to invoke the modal dialog - most DOM elements can invoke whatever function you like. You assign an event listener either to all nodes of interest or a delegated listener bound to a common parent element. The snippet below might be of use?
// add delegated listener on the containing node that has the content that is to be clicked
// by the user to invoke the modal dialog.
document.querySelector('div.urls').addEventListener('click', function(e) {
// Only process nodes that are not the specified target itself. ie: it's children
if (e.target != e.currentTarget) {
let modal=document.getElementById('myModal');
// add the content from the clicked node to the modal somewhere
let link = modal.querySelector('a[data-id="modal-target"]');
link.setAttribute('href', e.target.textContent);
link.innerHTML = 'Click to view';
}
});
.url:hover {
color: red
}
.url {
cursor: pointer;
}
<div class='urls'>
<p class='url'>https://www.example.com</p>
<p class='url'>https://www.banana.com</p>
<p class='url'>https://www.bogus.org</p>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="position:absolute;bottom:0;margin:0;width:100%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header"></div>
<a data-id='modal-target'></a>
</div>
</div>
</div>
this is a stranger question
i have this for cicle
for($i=0;$i<count($certificazioni);$i++){
$etc=certificazioni[$i];
....
<img src="/cubo/addDocument.png"/ height="24" width="24" data-toggle="modal" data-target="#addEvento">
}
when i click the image it open a bootstrap modal fade like popup
<div class="modal fade" id="addEvento" tableindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<?php echo $etc; ?>
how i can intercept the correct value ? i receive the last value of $etc
there is a method to get te correct value of the cicle for ?
you need to use javascript to get the value. I'm not sure what $etc data is, but basically you need to create a javascript function, and pass the value to the function onclick image.
Example:
PHP
for($i=0;$i<count($certificazioni);$i++){
$etc=certificazioni[$i];
....
?>
<img src="/cubo/addDocument.png"/ height="24" width="24" data-toggle="modal" data-target="#addEvento" onclick="return viewImage(<?php echo $etc; ?>)">
<?php
}
HTML Modal
Add additional div to the modal code
<div id="outputHere"></div>
JavaScript
<script>
function viewImage(image) {
// do what you need with the data, which is in this case to append to the modal
document.getElementById('outputHere').innerHTML = image;
// this example is only to append the value. you can modified it to suit your needs (html code or anything)
}
</script>
I think what you're trying to do is to open a specific modal when an image in clicked and if so, then try this:
for($i=0;$i<count($certificazioni);$i++){
$etc=certificazioni[$i];
....
<img src="/cubo/addDocument.png"/ height="24" width="24" data-toggle="modal" data-target="#addEvento<?= $i ?>">
<div class="modal fade" id="addEvento<?= $i ?>" tableindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<?php echo $etc; ?>
}
you should include the modal inside the for loop so that every image will have its own modal and when you click image 1 then modal 1 will open.. and you don't even need to use javascript for this.
Just a simple question to ask if there is someone available to assist me. Please take a look at this section on my index page:
<?php foreach($galleries as $item) { ?>
<div class="col-md-2">
<p>Eagle Fruit <?= $item['gallery_name'] ?></p>
<img src="<?php echo base_url() . 'assets/img/site/' . $item['gallery_cover'] ?>" class="img-responsive">
View the Gallery
</div>
<?php } ?>
My Controller is setup with the following function
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Site extends MX_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('gallery/Gallery_m');
}
public function index($id = 'ID')
{
$data['title'] = 'Welcome to Eagle Fruit Alliance (Pty) Ltd';
$data['galleries'] = $this->Gallery_m->get_galleries();
$data['gallery'] = $this->Gallery_m->view($id);
$data['content'] = 'index_view';
$this->load->view('templates/site/template',$data);
}}
Now when I click on the link i would like the gallery to open in a modal how would i achieve this? I have added a modal with the following code where am I going wrong:
Modal
<!-- Modal -->
<div class="modal fade" id="gallery" 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"><?= $gallery['name'];?></h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- ./Model -->
Because you are interacting with the user's click on an image, this isn't a PHP or HTML question. User interaction always involves javascript/jQuery.
AJAX is a two-part methodology. It is initiated in javascript, and sends data to a server-side PHP file that does something and returns a response, which is received/dealt with in javascript. See this SO post for more information on AJAX.
However, this question doesn't need to use AJAX either, because there is no additional data to fetch.
It's a bit difficult from your code to see exactly how to trigger the modal. Usually, we look for a commonality in the code, such as a class name, to use as the trigger. In your case, you could try:
$('p+img').click()
However, I recommend modifying your code like this:
<img class="mod_trig img-responsive" src="<?php echo base_url() . 'assets/img/site/' . $item['gallery_cover'] ?>" >
Note: I moved the class to front of tag only to make it very visible in this answer. Keep it where it is in your code, if you wish.
Next, when a trigger is clicked, you use CSS selectors (jQuery uses CSS selectors, so learn them -- and Bootstrap uses jQuery, so learn jQuery) to get the href attribute of the <a> tag -- this is the direct link to the desired image, correct? You would only need to use AJAX if you didn't already have some information available to you on the page, but in this case you have all you need.
Use jQuery's .html() method to create an <img> tag inside the Bootstrap modal, replacing whatever was in that particular DIV. Here is a very simple example where we demonstrate exactly this procedure, but instead of putting it into the Bootstrap modal's framework we simply create the <img> tag inside a pre-existing DIV called #msg.
jsFiddle Demo
$('p+img').click(function(){
var i = $(this).next('a').attr('href');
//alert(i);
$('#msg').html('<img src="'+i+'" class="msg" width="200" height="200" />');
});
#msg{position:absolute;top:30%;left:40%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
<p>This is a test</p>
<img src="http://placeimg.com/98/100/animals" />
View the Image
</div>
<div>
<p>This is a test</p>
<img src="http://placeimg.com/100/95/animals" />
View the Image
</div>
<div>
<p>This is a test</p>
<img src="http://placeimg.com/95/95/animals" />
View the Image
</div>
<div id="msg"></div>
*It's not a perfect example, because the placeholder image website does not serve the same image when requesting identical parameters, so you can uncomment the alert() line to see that each time you click an image you get different parameters injected into the #msg div -- you get the correct parameters for the <img> on which you clicked.
Now, all you need to do is to inject (via html() method) the newly-created <img> tag into the appropriate Bootstrap div instead of into the #msg div:
$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
And trigger the modal to display:
jsFiddle Next Demo
$('.mod-trigger').click(function(){
var i = $(this).next('a').attr('href');
$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
$('#gallery-lightbox').modal('show');
});
Note how in this example I replaced the CSS selector with '.mod-trigger', and created a class on each image with that className
This new example shows you how to trigger the modal if a user clicks on the <a> tag:
jsFiddle Demo
Note that the <a> tag's default action is to navigate to another page. You don't want this, so the first thing you must do is suppress that default behavior:
$('.mod-atag').click(function(e){
e.preventDefault();
var i = $(this).attr('href');
$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
$('#gallery-lightbox').modal('show');
});
Also note that I added a className to each <a> tag to make it easy to detect the click.
I created a menu with links (#) which aims to show & hide a div thanks to the onclick attribute.
For example the link "home" can hide/show the div "contentHome", the link "contact" can hide/show the div "contentContact".
The problem I have is that the container div "content" includes the div "contentHome" and "contentContact" when i click on the 2 links one time...
Here is a part of my code :
<li><a href="#" onclick="toggle('contentHome');" ><?php echo $lang['MENU_ACCUEIL'];?>
<div id="content">
<div id="contentHome">
<img src="Images/photo.jpg" class="imgphoto" alt="Simplepic" />
<?php echo $lang['TEXTE_ACCUEIL'];?>
<img src="Images/work.png" class="imgwork" height="100" width="100" alt="Travaux" />
<?php echo $lang['TEXTE_SOON'];?>
</div>
<div id="contentContact">
...
</div>
</div>
The position is static, I can't put a z-index and when I put display:none;, divs don't want to load.
What do you think ? I just wanted to create a dynamic menu with div but the php includes makes me struggle...
Here i've created some example of toggle with divs.
<li>Toggle Red</li>
<li>Toggle Blue</li>
<div id="content">
<div class="toggled-item" id="contentHome">
<div style="width:200px; background-color:#f00; height:200px;"></div>
</div>
<div class="toggled-item" id="contentContact">
<div style="width:200px; background-color:#00f; height:200px;"> </div>
</div>
</div>
<script>
$(document).ready(function(){
$("#lnk_contentHome, #lnk_contentContact").click(function(){
$(".toggled-item").hide();
var target = $(this).attr("id").split("_")[1];
$("#" + target).toggle();
});
});
</script>
https://jsfiddle.net/ow7dd12f/5/
Hope helps.
I am trying to generate unique IDs for each modal, as I will be loading in an address specific map to each modal. My issue is that when I click the link:
<a data-toggle="modal" href="#myModal_<? echo $meeting['ID'] ?>" ><? echo $meeting['Address'].", ".$meeting['City'] ?></a>
it tries to take me to mypage.php/#myModal_8 (or whatever the given ID is, instead of pulling up that specific modal. The modals work great is I don't have the ID attached, but they won't load dynamic content that way.
<a data-toggle="modal" href="#myModal_<? echo $meeting['ID'] ?>" ><? echo $meeting['Address'].", ".$meeting['City'] ?></a>
</p>
<div class="modal hide" id="#myModal_<? echo $meeting['ID'] ?>">
<div class="modal-body">
<? echo $meeting['Address'] ?>
</div>
<div class="modal-footer">
Close
</div>
</div>
Any help on this would be much appreciated. Thank you!
It's all about the ID you are giving to the modal : id="#myModal_<? echo $meeting['ID'] ?>"
The # is only needed for the jQuery selector, not the ID. Which would give :
<div class="modal hide" id="myModal_<? echo $meeting['ID'] ?>">
Further more, you should open your php tags with <?php for the reasons described here : Are PHP short tags acceptable to use?