below is my HTML model,
<
And below is my JavaScript.
$(document).ready(function() {
alert("Script is on");
$("#portfolioModal1").on('show.bs.modal', function () {
alert('The modal is about to be shown.');
});
$( "#portfolioModal1" ).on('shown', function(){
alert("Shown!");
});
});
$("button").click(function find_route_time()
{
// This function is tested and is working fine.
});
I tried solution from many tutorials, but this is not working. I am unable to understand why? My javascript should generate alert when the Model Opens up but nothing happens.
And below is the link,
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" data-target="#portfolioModal1">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/EAST-CLICK.jpg" class="img-responsive" alt="">
</a>
Here is the fix for your code:
Add Button to your html code as showing below:
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
Replace your JS code with below code:
$(document).ready(function(){
$("#myBtn").click(function(){
$("#portfolioModal4").modal("show");
});
$("#portfolioModal4").on('show.bs.modal', function () {
alert('The modal is about to be shown.');
});
$("#portfolioModal4").on('shown.bs.modal', function () {
alert('The modal is fully shown.');
});
});
Note - if you want to open popup on page load event then just remove the click event from the script but the issue will be it just going to capture shown event.
let me know if you find this useful.
Here is completed Tested file.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
Open Popup
<!-- Modal -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
.....................SOME CODE.....................
</div>
</div>
</div>
<script>
$(document).ready(function () {
alert("Script is on");
$("#portfolioModal1").on('show.bs.modal', function () {
alert('The modal is about to be shown.');
});
$("#portfolioModal1").on('shown.bs.modal', function () {
alert("Shown!");
});
});
$("button").click(function find_route_time() {
// This function is tested and is working fine.
});
</script>
</body>
</html>
Related
I try to load an external block of html through .load() jquery function, but it fails to render properly in a modal popup (note: same issue with .get() )
code is :
$('#butt2').on('click', function() {
$('#mbodyko').load('nav.html', function() {
$('#myModalnok').modal({show: true });
});
});
Render is bad, here is the issue:
http://plnkr.co/edit/z9oQPVG2F9oYaJCzovN5?p=preview
You can notice that the tabs inside the second modal are not clickable, whereas the same html code renders well in the first modal.
Do you know why ?
Thanks for your hints!
All I did to make it work is removing out the first modal html, like this:
<html dir="ltr" lang="en-US">
<head>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
</head>
<body>
<hr>
<button class="btn btn-primary btn-lg" id="butt1">modal OK</button>
<br />
<br />
<button class="btn btn-primary btn-lg" id="butt2">modal NOK - use jquery .load</button>
<div class="modal fade" id="myModalnok" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-body">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Problem: click does not change the tabs!</h4>
</div>
<div class="modal-body" id="mbodyko">
</div>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
<script>
$('#butt1').on('click', function() {
$('#myModalok').modal({
show: true
});
});
$('#butt2').on('click', function() {
$('#mbodyko').load('nav.html', function() {
$('#myModalnok').modal({
show: true
});
});
});
</script>
</body>
</html>
I think the problem is that the loaded data from nav.html have IDs that are in the original html DOM, or index.html and you can't have a page with two elements that have the same ID, or it will not work properly.
I'm struggling to get my head around this. I am attempting to load a partial view into a div for a modal but i just cant seem to get it working. Every time i click the button the screen fades as if its going to show a modal but then returns to normal. Any help would be greatly appreciated.
My Button
<button class="btn btn-default" id="addDocument">Add</button>
The Empty Modal
<div id='myModal' class='modal fade' data-url='#Url.Action("CreateTemplateDocument")'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
And my script
#section Scripts {
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#addDocument').click(function () {
var url = $('#myModal').data('url');
$.get(url, function (data) {
$('#myModalContent').html(data);
$('#myModal').modal('show');
});
});
});
</script>
#Scripts.Render("~/bundles/jqueryval")
}
Update:
So from doing further testing it seems that the page is reloading after running the script. I was under the impression that was what ajax prevented but im guessing that is wrong.
I managed to fix this by having the function return false. I'm not sure why this worked so if anyone could enlighten me, that would be awesome.
Try this i have change the Modal show command and remove data url
#section Scripts {
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#addDocument').click(function () {
var url = $('#myModal').data('url');
$.get(url, function (data) {
$('#myModalContent').html(data);
$('#myModal').modal({
keyboard: false,
remote: '/home/partial' // YOUR PARTIAL VIEW URL
}).show();
});
});
});
</script>
#Scripts.Render("~/bundles/jqueryval")
}
<div id='myModal' class='modal fade' >
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
<div id='myModal' class='modal fade' data-url='#Url.Action("CreateTemplateDocument")'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
I have problem with close a modal,
i check for jquery and its ok.
I am using 1.12.4 version and i have tag in head of code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
My open modal tag is:
<a data-toggle="modal" class="modal-trigger" data-id="11" href="#komentarM"></a>
And my modal cocde is:
<div id="komentarM" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<input type="text" name="id" value=""></input>
<div class="modal-footer">
Agree
</div>
</div>
With this code i try trigger showing a modal:
<script>
$(document).ready(function () {
$('#komentarM').on('shown.bs.modal', function (e) {
data = $(e.relatedTarget).data('id')
$(e.currentTarget).find('input[name="id"]').val(data);
});
});
Problem is when i click to close modal, or click on black spaces on page my modal was closed but when i click to open modal again only overlay show.
I am post a picture what happens when i close modal and open again.
You forgot to add a semicolon at line:2
$('#komentarM').on('shown.bs.modal', function (e) {
data = $(e.relatedTarget).data('id');
$(e.currentTarget).find('input[name="id"]').val(data);
});
Have you checked the chrome/firefox error console ? I think it will be throwing some js error when it is trying to reopen the modal. Reason is could be the re-execution of following code on reopening. I may not be correct with below code but some error must be being recorded in console which will help in debugging
$('#komentarM').on('shown.bs.modal', function (e) {
data = $(e.relatedTarget).data('id')
$(e.currentTarget).find('input[name="id"]').val(data);
});
If no error is being thrown in console then i recommend try changing the jquery library to next stable version and make sure it is compatible with bootstrap framework. just a suggestion to debug
if you do not use shown event then does it work (modal gets reopened)?
[modified sample]
<html>
<head>
<script
src="https://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " rel="stylesheet" integrity="sha384- BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div id="komentarM" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<input type="text" name="id" value=""></input>
<div class="modal-footer">
Agree
</div>
</div>
<a data-toggle="modal" class="modal-trigger" data-id="11" href="#komentarM">Hello</a>
</body>
<script>
$(document).ready(function () {
$('#komentarM').on('shown.bs.modal', function (e) {
data = $(e.relatedTarget).data('id')
$(e.currentTarget).find('input[name="id"]').val(data);
});
});
</script>
Problem was in closing modal, modal was close but not in code, when i try open again that start break and i am add in jq:
$(document.body).on('click', '.lean-overlay', function () {
$('.modal').modal('hide');
});
I have an instagram iframe that get 9 random images with href links (for pictures) and span with same background. So I would like to open it in popup like gallery.
I use the Bootstrap for popup, but there is only first one or last one picture open in popup.
<a data-toggle="modal" data-target="#myModal1" href="'.$thumbnail.'" class="image"><span style="background-image:url('.$thumbnail.');"> </span></a>
<div id="myModal1" class="modal fade" role="dialog" style="overflow-y: hidden;">
<div class="modal-dialog">
<div id="pic" class="modal-content" style="background-image:url('.$thumbnail.'); ></div>'
</div>
</div>
Could you help me?
I've done it!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.min.css">
</head>
<body>
<a data-toggle="lightbox" href="'.$thumbnail.'" class="image"><span id="" style="background-image:url('.$thumbnail.');"> </span></a>
<script src="//code.jquery.com/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.min.js"></script>
<script type="text/javascript">
$(document).ready(function ($) {
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
});
});
});
</script>
</body>
</html>
Demo is here[http://www.jquery-az.com/boots/demo.php?ex=17.0_1]
I'm working on a page with two Bootstrap 3 modals in Chrome. Everything appears fine until you leave the developer console open and launch one of the modals. You can repeat the issue with this jsfiddle, again with the latest Chrome, or create an html page with the below code.
http://jsfiddle.net/ow3n/22ENG/
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function launchReportModal(){
$('#reportModal').modal();
}
function launchShareModal(){
$('#shareModal').modal();
}
</script>
</head>
<body>
<a href='#reportModal' onclick='launchReportModal()' class='report_link' data-toggle='modal' data-target='#reportModal'>report</a>
<a href='#shareModal' onclick='launchShareModal()' class='report_link' data-toggle='modal' data-target='#shareModal'>share</a>
<div class="modal fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="reportModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Report <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="shareModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Share <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
</body>
</html>
Edit: Using jQuery selectors to launch the modal in the html fixes the issue, but you can still see the problem in jsfiddle regardless.
$('#launchReportModal').on('click', function(){
$('#reportModal').modal();
});
$('#launchShareModal').on('click', function(){
$('#shareModal').modal();
});
<a href='#' id='launchReportModal' data-toggle='modal' data-target='#reportModal'>report</a>
<a href='#' id='launchShareModal' data-toggle='modal' data-target='#shareModal'>share</a>
You are trying to activate the modals automatically and activate them manually at the same time! If you read the docs :
Activate a modal without writing JavaScript. Set data-toggle="modal"
on a controller element, like a button, along with a
data-target="#foo" or href="#foo" to target a specific modal to
toggle.
You have both
<a href='#' id='launchReportModal' data-toggle='modal' data-target='#reportModal'>report</a>
and
$('#launchReportModal').on('click', function(){
$('#reportModal').modal();
});
The error is triggered like this :
$.fn.modal (_relatedTarget)
Modal.toggle (_relatedTarget)
Modal.hide (_relatedTarget)
_relatedTarget is considered as an event in the code :
Modal.prototype.hide = function (e) {
if (e) e.preventDefault()
-> Uncaught TypeError: Object http://fiddle.jshell.net/22ENG/2/show/# has no method 'preventDefault'
But _relatedTarget is not an event, it is an element. Appearently data-target has higher rank than your $(element).modal() code.
Solution : Just skip your javascript activation of the modals -> http://jsfiddle.net/QFyv9/ - forked jsFiddle using a unminified version of 3.1.1 bootstrap.js (so I could track down the problem)
I have updated the jsfiddle demo:
http://jsfiddle.net/22ENG/11/
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
and upgraded bootstrap from 3.1.1 to 3.2.0.
The error is gone, and it toggles twice, as coded.