Develop Reference

Can't access elements within iframe

I am trying to close a modal from within the parent.html with a button that is inside the <iframe>.
This is the modal I have in my parent.html.
<div class="modal fade" id="verificationModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<iframe id="myFrame" src="./pop.html"></iframe>
</div>
</div>
</div>
</div>
Button in parent.html to show the modal.
<button type="submit" id="submit-button" class="btn btn-light btn-md btn-block bt"
data-toggle="modal" data-target="#verificationModal">Continue</button>
Button in pop.html to hide the modal.
<button type="submit" id="pop_submit_button" class="btn btn-light btn-lg bt">Enter</button>
And this is the script in parent.html.
<script>
$(document).ready(function () {
$(window).load(function () {
$("#submit-button").click(function () {
$('#verificationModal').modal('show');
});
});
$("#myFrame").load(function () {
var doc = this.contentDocument || this.contentWindow.document;
var target = doc.getElementById("pop_submit_button");
$(target).click(function () {
$('#verificationModal').modal('hide');
});
});
});
</script>
I want to show the modal upon clicking the #submit-button that is in the parent.html and close the modal upon clicking #pop_submit_button that is within the frame pop.html. Though the showing part is working, I can't get the hiding part to work.

why when i use modal fade as i suppose to it did not work?

I've been working with modal fade and it didn't work
what suppose happen is adding a new grade in partial view so i decided to work with modal fade and i didn't know anything about it.
so there is the code and please help me to fix the problem
<p>#* Button *#
New Grades
</p>
<div class="modal fade" id="mymodal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
×
<h3 class="modal-title">Add/Edit Grades</h3>
</div>
<div class="modal-body" id="myModalBodyDiv1">
<div style="text-align:center;display:none" id="loaderDiv">
<img src="~/Image/load2.gif" width="150" />
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script>
var AddEdit = function (id) {
var url = "/Grades/AddEditGrade/" + id;
$("#myModalBodyDiv1").load(url, function () {
$("mymodal1").modal("show");
})
}
</script>
any idea how can i fix it ??

you are missing ID selector symbol in this line:
wrong: $("mymodal1").modal("show");
modified: $("#mymodal1").modal("show");

Modal for multiple images on one page

*Repeat Post
I have searched around and found a potential answer to adding a modal to one page for multiple images. This solution I found is giving me my modal but when the modal pops up the image is not showing and the console showing the "img src" is "(unknown)".
The solution I found:
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (e) {
var image = $(e.relatedTarget).attr('src');
$(".img-responsive").attr("src", image);
});
});
<img id="1" data-toggle="modal" data-target="#myModal" class="image" src="/images/hieroglyphics/9.jpg">
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img class="img-responsive" src=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Any help would be greatly appreciated! Thanks!

I can confirm that your code seems to work correctly.
here is a fiddle with your code.
https://jsfiddle.net/jammer99/y0w1t95u/
Are you sure there isn't anything else opening the modal?
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (e) {
var image = $(e.relatedTarget).attr('src');
$(".img-responsive").attr("src", image);
});
});
can you paste a screenshot of your console? to check if there are any other errors?

how can i create a modal by remote and initial textbox in the same function using jquery?

script.js
function change_val(){
$("#remoteModal2").modal({
remote:"modals/edit_text_value.html",
show:true
});
$("#my_textbox").val("this is a text")
}
index.html
<div class="modal fade" id="remoteModal2" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
<button onclick="change_val()" >show modal</button>
edit_text_value.html
<div class="modal-header">
header
</div>
<div class="modal-body">
<textarea id="my_textbox"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
</div>
The problem is that I must run it twice to make it work !
How to do all the operations in a function ?

shown.bs.modal OR show.bs.modal
When we use this code :
.on('shown.bs.modal')
.
$('#remoteModal2').on('shown.bs.modal', function (e) {
$("#my_textbox").val("this is a new text);
return e.preventDefault();
});
import modal (remote "edit_text_value.html")
Open modal
After the completion of loading and effects , change value..
show new value...
But this code :
.on('show.bs.modal')
Apply the changes ,Before reading the tags and remote the modal...
Therefore, it is not effective.
Because it can not find this ID (#my_textbox) Before remote modal page!
more information...

Modal only displays first image

I have got an issue where my modal only displays the first image. What I am trying to do is that i want to display a dynamic gallery. Every "post" can have 0-* images and based on how many images there are in the database for this post thats how many will appear. I came across this issue and have found others having similar issues but not exactly the same.
This code is basically a partial view where the post is generated. The Modal is displayd correct amount of times but only displays the first picture.
Thanks so much in advance
<ul class="imageRow">
#foreach (var item in Model)
{
<div class="col-lg-3 col-md-4 col-xs-6">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-target="#image-gallery">
<img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,#item">
</a>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,#item">
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script>
$(document.body).on('hidden.bs.modal', function () {
$('#image-gallery').removeData('bs.modal');
});
$(document).ready(function () {
loadGallery(true, 'a.thumbnail');
//This function disables buttons when needed
function disableButtons(counter_max, counter_current) {
$('#show-previous-image, #show-next-image').show();
if (counter_max == counter_current) {
$('#show-next-image').hide();
} else if (counter_current == 1) {
$('#show-previous-image').hide();
}
}
function loadGallery(setIDs, setClickAttr) {
var current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image').click(function () {
if ($(this).attr('id') == 'show-previous-image') {
current_image--;
} else {
current_image++;
}
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});
function updateGallery(selector) {
var $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if (setIDs == true) {
$('[data-image-id]').each(function () {
counter++;
$(this).attr('data-image-id', counter);
});
}
$(setClickAttr).on('click', function () {
updateGallery($(this));
});
}
});
</script>
}

You are using the same ID (id="image-gallery") for all of your modals. HTML element IDs are supposed to be unique! You need to generate different IDs for each of your modals.