The issue is on here. The tabs are working just great, but when I click on the last tab: "Vincents Apartment", the images don't show when clicked on.
It's a thumbnail gallery and it worked before on other pages.
It supposed to be working this way: when you click on an image, it should show and you then can click next to see the next image.
I have this js file: photo-gallery.js - I think the problem is here, with the code.
you should add this code in services.html
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
<div class="modal-body"></div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
You missed to add some html code in services.html page. That is id="myModal" block code. The code is available in gallery.html page. Copy & paste in services.html page. it will work.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-abelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
<div class="modal-body">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
your click handler was not registered since the element was injected later, hence not part of the DOM.
if you are using jquery for example. you would replace your usual img or anchor click handler to something like
$('body').on('click', 'your img or anchor selector here', function () {
}
Related
enter image description hereHi I have an action that returns partial view I want to call it partial twice from view after once inside a modal and once outside the modal to fit the site to mobile. I use #html.action what actually happens is that there are events on click in partial and the js always listens only to the first and the one I put second inside a modal for example does not work. If I change their order on the page it will be reversed. Looking for a solution how to call that partial.
my code:
#Html.ActionLink("Search", "Cars")
<div class="modal fade carDetielsModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-header">
<button class="close" aria-label="Close" data-dismiss="modal">
#*<span aria-hidden="true">×</span>*#
<img src="~/images/icon_X (1).png" />
</button>
</div>
<div class="modal-content">
#Html.Action("Search", "Cars")
</div>
</div>
</div>
</div>
#Html.ActionLink("Search", "Cars")
`cell = '<div class="col-4"><div class="card" style="width: 18rem;">\
<img class="card-img-top" src="products/'+thumb+ '" alt="Card image cap">\
<div class="card-body">\
<h5 class="card-title">'+title+ '</h5>\
<p class="card-text">'+cats+'</p>\
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Show More</button>\
</div>\
</div></div>
Code in another page:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<span id="message">Thank You </span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Please help me. My modal doesnt show no matter how many times i try. Does modal work in bootstrap cards? No matter how many times i press the button the modal doesnt show. My modal is in another html page. Is there a problem with that? Im using visual studio code
The HTML for the modal must be on (or available) to the page that you're calling it from and wanting it to pop up on. For example:
<html>
<head>
stylesheets
bootstrap javascript libraries
</head>
<body>
<h1>Welcome</h2>
<section>
Content ....
<button>Open the modal!</button>
</section>
<footer></footer>
<div class="modal">
Put modal at bottom
</div>
</body>
</html>
Then, make sure that you are linking to the Bootstrap javascript files and jQuery for the modal to work. Bootstrap has a convenient CDN link for this at https://www.bootstrapcdn.com/
I have a modal which appears when a button is clicked but the links present inside the modal appears before even opening the modal, they are invisible though but they are present because if a user clicks on the page the link inside the modal gets clicked.
To see it, open filemile.ga and hover your mouse over the logo.
<button type="button" class="btn btn-info btn-sm " data-toggle="modal" data-target="#myModal">more</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" >
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Top Searches</h2>
</div>
<div class="modal-body">
lots of links here
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Replace <div class="modal fade" id="myModal" role="dialog" > with <div class="modal fade hide" id="myModal" role="dialog" >
This hide class will set your modal inaccessible, bootstrap will take it off when you click the button.
This site you commented uses Bootstrap 2.3 link to documentation. If you edit it, this site will help you.
I just and a CSS style that seems to resolve.
On the first div of the Modal, whose the id is myModal just add the flolowing:
<div class="modal fade" id="myModal" role="dialog" style="display:none;">
Looking at some video tutorials I follow what has been done but don't seem to get to modal of the register link to trigger.
Here is the link I want to trigger:
<li>Register</li>
Here is the modal that should be triggering
<!-- Register Modal -->
<div class="modal fade" id="#register-modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2>Register</h2>
</div>
</div>
</div>
</div>
I assume that there should be jQuery to be implemented after looking at other answers but i do not see how come if the jQuery comes from the bootstrap. The Bootstrap 3 documentation seems to do the same as I did http://getbootstrap.com/javascript/#modals-examples
The id attribute shouldn't have a hashtag.
Change
<div class="modal fade" id="#register-modal" role="dialog"></div>
to:
<div class="modal fade" id="register-modal" role="dialog"></div>
Working Example
I stumbled across a similar question to mine, but not exactly what I want (Fancy box, grab from url). I want to do the same thing but with bootstrap modals. I did find some tutorials on this by adding data-remote and it does not work. Also it is not exactly what I want to do. What I want is just simply a modal. Not any of the code for the header, main part or the footer. All of that will be included in the external page (the page is still actually located on the server). So basically a link like this faq will be included and it will open a bare modal
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
//ajax loads the external page stuff into here.
</div>
Then on the external page (that is on the same server) would contain something like this:
<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" 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><!-- /.modal-content -->
I hope this is possible. Thanks for the help!
I figured it out. On the main page, put
<a href="" data-toggle="modal" data-target=".modal" data-remote="URL_HERE">TEST/a>
as well as this:
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
</div>
Then simply put something like this on the remote site.
<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" id="myModalLabel">title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
Go! »
</div>
</div>
</div>