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.
Related
I have a working site with a working modal popup built with jquery. On this site there is a table with a column "delete". Every row has a href which opens the modal popup and in this popup there is a a href link "DELETE". This href link is filled dynamically by js code, depending on which delete column link was clicked on the site:
<td><span id="hoverdeleteTI" data-href="deleteTI.php?id=2" data-toggle="modal" data-target="#confirm-delete">OPEN POPUP</span></td>
The following script adds the href part to a href inside the modal popup.
<script>
$('#confirm-delete').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
$('.debug-url').html('delete URL: <strong>' + $(this).find('.btn-ok').attr('href') + '</strong>');
});
</script>
Modal popup:
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="head-deletepopup">
<span class="close" data-dismiss="modal" aria-hidden="true">×</span>
<div class="mpopup-titel">DELETE CONFIRM</div>
</div>
<div class="modal-body">
<p>REALLY?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="ddeletebutt btn-default" data-dismiss="modal">CANCEL</button>
<button type="button" class="ddeletebutt btn-ok">DELETE BUTTON</button>
<a class="dddeletebutt btn-ok">DELETE</a>
</div>
</div>
</div>
</div>
The script converts this part <a class="dddeletebutt btn-ok">DELETE</a>
into <a class="dddeletebutt btn-ok" href="deleteTI.php?id=2">DELETE</a>
That's the part which is working. But what I actually want is, that it adds the href to the button before "DELETE BUTTON". Therefore I need to transcode this code <button type="button" class="ddeletebutt btn-ok">DELETE BUTTON</button>
into
<button type="button" class="ddeletebutt" onclick="location.href='deleteTI.php?id=2'">DELETE BUTTON</button>
But at the moment I obviously only getting: <button type="button" class="ddeletebutt btn-ok" href="deleteTI.php?id=2">DELETE BUTTON</button>
How can I change the added href= into onclick="location.href=
Thank you!
Change this line
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
To this:
$(this).find('.btn-ok').attr('onclick', 'location.href=\'' + $(e.relatedTarget).data('href') + '\'');
If your code is targeting the anchor element instead of your button then use a better selector for finding the element. In your case prefix your class selector with a tag selector ie button.btn_ok
$(this).find('button.btn_ok')
Also you don't need to set the actual html onclick attribute, you can use jQuery event methods, or the native addEventListener
let href = $(e.relatedTarget).data('href');
$(this).find('button.btn_ok').click(()=>location.href=href});
//or with native methods
this.querySelector('button.btn_ok').addEventListener('click',()=>location.href=href});
And by your example your end element would not have the btn_ok class any more which you can remove by using jQuery's removeClass()
$(this).find('button.btn_ok').removeClass('btn_ok');
i try to chenge the src ifame in js but i cant success.
the i frame always empty and without content of new window src.
if i put the src inside the iframe its work ( i cant do that becuse i need id to src and i got that on js function)
html:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<iframe src="" id="iframePOP" style="zoom:0.60" width="99.6%" height="250" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default text-center" data-dismiss="modal">close</button>
</div>
</div>
</div>
js:
function ShowPopup(id) {
$('#myModal').on('show', function () {
document.getElementById("iframePOP").src="/Game.aspx?GameId=" + id;
});
$('#myModal').modal({ show: true })
}
i tried also this:
function ShowPopup(id) {
var frameSrc = "/Game.aspx?GameId=" + id;
$('#myModal').on('show', function () {
$('iframe').attr("src", frameSrc);
});
$('#myModal').modal({ show: true })
}
Have you tried assigning your whole domain name into your var frameSrc?
EDIT:
Try changing $('#myModal').on('show', function () { ... } into $('#myModal').is(':visible', function(){ ... }); and make sure the ID of the modal you are referencing is correct. If that didn't work, try this $('#myModal').on('show.bs.modal', function (e) { ... })
I am using this modal:
<div id="myalertbox" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
You have a new notification!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
Which pops up and says "You have a new notification!". I pop it up by using this script:
<script>
function showAlert() {
$("#myalertbox").modal({
"backdrop": "static",
"keyboard": true,
"show": true,
});
}
</script>
I dont know how to change the text inside though? I tried with .text and .html but it doesn't work.
Change text before calling the modal as
$("#myalertbox .modal-body").text('pass your text here');
Before initiating the modal, you can change its html like:
$("#myalertbox .modal-body").html('pass your html here');
// It will put your html inside the div having Class .modal-body which is enclosed with a div having ID #myalertbox
and after that initiate its modal as usual way.
As the content is not nested into any tags.
It's better to use this one below.
var btnHtml='< button type="button" class="close" data-dismiss="modal">
× ;< /button>';
$('#myalertbox .modal-body').html(btnHtml +"your text here");
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...
So, I am using bootstrap's modal.
I want to make a wizard style modal and came up with the following solution:
div snippets:
<div class="modal-instance hide fade" id="step1">
<div id="stepa">
...
</div>
</div>
<div id="stepb" style="display: none;">
...
</div>
Upon pressing a button in step-a step-b is loaded.
javascript snippet:
$("#stepa").replaceWith($('#stepb'));
document.getElementById('stepb').style.display = 'block';
This works ok.
But when I dismiss the modal. The div stepa has still been replaced by stepb. My solution was to build a replacement back to stepa when the modal is hidden:
$("#myModal").on("hidden", function() {
//replace the child
});
I tried:
$('#step1').children().remove();
$('#step1').append($('#stepa'));
and
$("#step1").children("div:first").replaceWith($('#stepa'));
But I am having a hardtime selecting step-a as a replacement div, probably due to it not being a separate div. My question is, is this the right approach for a wizard styled modal or should I take another approach?
It's much simpler just to hide the previous and next steps, instead of copying them.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div id="myModal" class="modal hide fade" data-step="1">
<div class="step step1">
<h1>Step 1</h1>
<button class="btn next">Next</button>
</div>
<div class="step step2">
<h1>Step 2</h1>
<button class="btn previous">Previous</button>
<button class="btn next">Next</button>
</div>
<div class="step step3">
<h1>Step 3</h1>
<button class="btn previous">Previous</button>
<button class="btn done" data-dismiss="modal">Done</button>
</div>
</div>
<style type="text/css">
#myModal > .step { display: none; }
</style>
<script type="text/javascript">
$(function() {
showStep(parseInt($('#myModal').data('step')) || 1);
$('#myModal .next').on('click', function () {
showStep(parseInt($('#myModal').data('step')) + 1);
});
$('#myModal .previous').on('click', function () {
showStep(parseInt($('#myModal').data('step')) - 1);
});
$('#myModal').on('hidden', function() {
showStep(1);
});
function showStep(step) {
$('#myModal').data('step', step);
$('#myModal > .step').hide();
$('#myModal > .step' + step).show();
}
});
</script>
http://jsfiddle.net/7kg7z/5/