I am created one project. In which first I made a hover effect on image album but now I want to make an on-click event. I am trying to make this proper but not done.
I'll give the link : http://ihannoveraner.de/servicebieter/profile.html
When Click link then opens REFERENCE page. you can see hover effect on the image. that place I need click on the image and open popup
My Jquery code is:
$('.ref-img').hover(function () {
$('#MyPopup #albums a').html($(this).html());
$("#MyPopup").modal("show");
});
My Html Code:
<div id="albums"><a href="images/our/01.jpg" class="ref-img">
<div class="zoom-i">
<img class="primary" src="images/our/02.jpg">
<div class="popular-overlay">
<strong>Logo Design</strong>
</div>
</div>
<img class="secondary-1" src="images/our/03.jpg">
<img class="secondary-2" src="images/our/04.jpg">
<div class="meta">
album 1
</div>
</a>
</div>
My Modal Is:
<div id="MyPopup" 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">
</h4>
</div>
<div class="modal-body">
<div id="albums">
<a>
</a>
</div>
</div>
</div>
</div>
</div>
Above I display code. From this code on hover, image is displayed in the model but now I am trying to display modal after I click.
Second, when popup open popular-overlay id is display using opacity 1.
I am trying to build like this
link
You can do this using two ways:
using onClick attribute in an html. onClick="functionName()"
using click function on item class in jquery.
You can see this link for reference:
https://jsfiddle.net/audetwebdesign/rQdZR/
Related
I have a HTML code:
<div class="container">
<div class="row">
#foreach(var post in Model)
{
<div class="col-sm-8">
<div class="row">
<div class="post-body container shadow p-3 mb-3 rounded-3">
<h2>#post.Title</h2>
<p>#post.Description</p>
<button type="button" class="show-post-btn btn btn-secondary" data-bs-toggle="modal" data-bs-target="#wholePost" onclick="return showContent()">Show post...</button>
</div>
<div class="modal fade" id="wholePost">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">#post.Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>#post.Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar col-sm-4">
col2
</div>
}
</div>
I want to make that to when I click on "Show Post" button modal window is open with corresponding content. Currently, if there is two blog posts clicking on button result in displaying content from the first post even If I click on button in the second blog post.
I want to make that when I click on "Show post" in first blog post modal window opens with content from first blog post and when I click on button in the second blog post modal window open with content from second blog post.
I even don't understand where I should make this, in c# code or with javascript. Please provide me theory not a code if you could because I would like to guess on my own how to make this. Sorry in advance if there is post like that already and great thanks for your help.
You could do it on JS but need to propagate HTML with some additional info
just some concept code for example:
<button onclick="showContent(#post.Id);">Show post...</button>
...
<div class="modal fade" id="wholePost_#post.Id">
JS file
function showContent(id){
$("#wholePost_"+id).show();
}
There are probably some more ways to do it.
The way bootstrap modals work is that the data-bs-target attribute in your button needs to have the same id as the modal so that's why it keeps opening the modal for your first element.
What you need to do is give each modal its separate id, so instead of #wholePost id for all of the modals it should be like #wholePost1, #wholePost2, ... .
I am designing an eCommerce website using woocommerce and Flatsome Theme in WordPress. I'm planning to deliver fruits and vegetables only in two cities.
Now I want a popup when someone arrives at my website which asks Select where you want to deliver and it gives the option for two cities only. When users select one option that selection must be placed in the header.
I tried a bootstrap modal for it. and it is working fine. Now when the user selects a product and moves to the product page that pop up appears again which is not comfortable. I just want it to appear on the home page and the selection a user made there must remain on any other page he/she moves.
If someone has a better idea to perform such function, please share or if you have a solution in this program then it will be appreciated.
HTML code is
<img style="height:20px;" src="logo.png" >
<a type="button" id="hash" class="btn" data-toggle="modal" data-target="#exampleModalCenter">
Select Your Location
</a>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="hasha">Select Your Location</h5>
<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button> -->
</div>
<div class="modal-body text-center">
<div class="row">
<div class="col-md-6">
<a id="btnsave" ><img style="height:80px;" src="tajMahal.png" ></a>
<p id="first">Indirapuram</p>
</div>
<div class="col-md-6">
<a id="btnsaveone" ><img style="height:80px;" src="mumbai.jpg" ></a>
<p id="firstone">Faridabad</p>
</div>
</div>
</div>
<div class="modal-footer">
<p> ©2020 Grofers Inc.</p>
</div>
</div>
</div>
</div>
You can use session or cookies to save the choise. On bootstrap, following the Usage section
$('#exampleModalCenter').modal({show: false})
Then, on each page (products, orders etc...) you can check through session or cookies if a country choice exists, otherwise:
$('#exampleModalCenter').modal('show');
So I have two modals which are triggered depending on the button I click
The first one is trigeered like this:
<a id="de_details" data-toggle="modal" data-target=".show-de-banks"> </a>
And it is built this way
<div class="modal fade show-de-banks" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
bla bla
<div class="modal-body">
bla bla
</div>
<div class="modal-footer">
bla bla
</div>
</div>
</div>
</div>
An the second one is called using a button:
<button class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>
And it is built the same way:
<div class="modal fade open-dialog" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
dsfgdfg
</div>
<div class="modal-body">
sdgfsdgsd
</div>
<div class="modal-footer">
sdfds
</div>
</div>
</div>
</div>
When I open the first one, I have no issue.
But when I want to open the second one, it disappear as soon as it has appeared.
I know that:
I have to include only one js bootstrap file
My scripts have to be at the end (for the sake of page rapidity loading)
Do I miss something?
As says comment of Ubiquitous Developers Bootstrap modal issue (not able to show the second modal) you should give button type as button
<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>
This is an old question, but I had the same issue and found this.
In your first modal, your div with class modal-header isn’t closed - you’re missing a </div>.
This means that the second modal will sort of be inside the first, which causes issues.
I found the issue by looking in the Elements tab of Chrome’s F12 tools, which shows issues like this well.
I'm using bootbox to create bootstrap modals. Here is how I'm creating a sample one:
bootbox.dialog({message: "hello"});
My problem is that the rendered dialog is kind of disabled (all screen is shaded), I can't click on it and even ESC cannot make the modal disappear!
When I inspect the dialog element in the browser this is what I see:
<div class="bootbox modal fade in" tabindex="-1" role="dialog" style="display: block;" aria-hidden="false">
<div class="modal-backdrop fade in" style="height: 321px;"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="bootbox-close-button close" data-dismiss="modal" aria-hidden="true" style="margin-top: -10px;">×</button>
<div class="bootbox-body">hello</div>
</div>
</div>
</div>
</div>
I checked with bootbox examples and it looks like it's the same CSS classes that have been used. So what's wrong here?
I've to to add the following CSS to fix the problem:
.modal-backdrop.fade.in {
z-index: 0;
}
I have modal which is rendering a markdown :
<div class="markdown">
<div id="myModal" class="modal hide fade in">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Header</h3>
</div>
<div class="modal-body">
Some content in here
Some links here
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
Now, my problem is that when I click on any of the links : it refreshes the browser if used href .
I want to open the links inside the modal, how can I achieve that ?
use this command instead of data-dismiss="modal" in link
onclick="$('#squarespaceModal').modal('hide')"
One way is using a jQuery ajax method such as .load() to get the content from the link and load it into the .modal-body or .modal-content..
$('.lnk').click(function(){
var lnk = $(this).data("src");
$('.modal-body').text('wait..');
$('.modal-body').load(lnk,function(){
});
})
You'd change the links to this...
<div class="modal-body">
Link1
Link1
Link1
</div>
Demo: http://bootply.com/87874
Another method:
Use iframe and jQuery to dynamically change the src of the frame: http://bootply.com/61676