Develop Reference

Bootstrap Modal not loading after page reloads

Bootstrap Modal does not load after page has been refreshed certain times.
After that, the modal will only show up when I open the page in incognito.
Does anyone have any fix for this bug?
You can go to the actual site to see for yourself: http://www.petalandco.com.au/
js:
jQuery(window).load(function(){
setTimeout(function(){
var hiddenmodal = getCookie('hiddenmodal');
if (hiddenmodal == "") {
jQuery('#popupNewsletterModal').modal('show');
}
}, 100);
HTML:
<!-- Modal -->
<div class="modal fade" id="popupNewsletterModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document" style="width:679px;height:439px;">
<div class="modal-content" style="<?php echo ($style);?>">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="background: rgba(0,0,0,0);top:0px;">
<span aria-hidden="true" style="color:#000;font-size:40px;">×</span>
</button>
<div class="modal-body">
<div class="widget popupnewsletter-widget heading__center">

How to close an iframe window?

hi every one now i am working on Iframe the problem is the iframe doesn't close completely,while reloading the page iframe is running on the background and i am unable to access the pages after reloading its because of iframe button which makes me trouble in accessing the page.
i have attached my iframe code below suggest me the possible solutions.
<div class="top" onclick="removeIFrame();"></div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">New Message</h4>
</div>
<div class="modal-body">
<iframe id="templatesrc" name="templatesrc" src="?do=manualupgrade&id=<AJDF:output>$smarty.get.id</AJDF:output>" width="690" height="400" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

In your page add the below code
<script>
function removeIFrame(){
document.getElementById("templatesrc").remove();
}
</script>
This will completely remove iframe.

Modal bootstrap is not showed until function ends

I'm novice in web programming yet but I' m trying to learn :)
I want to hide a modal to show another modal("Please wait screen"),to wait for a function call to end (loadData()). But the first modal gets hidden and then the screen fades until function ends and only then the "Please Wait" modals appears.
Any help is welcome.
Ps: Sorry for my bad english...
HTML
First modal
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Modal 1</h4>
</div>
<div class="modal-body">
<button type="button" id= "btn1" class="btn btn-primary" data-target="#modal1">Click</button>
</div>
</div>
</div>
</div>
The second modal
<div class="modal fade bs-example-modal-sm" id="myPleaseWait" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<span class="glyphicon glyphicon-time">
</span> Processing data...
</h4>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar progress-bar-info
progress-bar-striped active"
style="width: 100%">
</div>
</div>
</div>
</div>
</div>
</div>
Javascript
$('#btn1').click(function(e) {
e.preventDefault();
$('#modal1').modal('hide');
$("#myPleaseWait").modal("show");
loadData();
});

Bootstrap's modal class exposes a few events for hooking into modal functionality.
show.bs.modal
This event fires immediately when the show instance method is called.
shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.modal
This event is fired immediately when the hide instance method has been called.
hidden.bs.modal
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
loaded.bs.modal
This event is fired when the modal has loaded content using the remote option.
$('#btn1').click(function(e) {
e.preventDefault();
$('#modal1').modal('hide');
$('#modal1').on('hidden.bs.modal', function (e) {
$("#myPleaseWait").modal("show");
});
loadData();
});
For more details refer Bootstrap Documentation

Thanks #sri, with your explanation I could resolve it.
$('#btn1').click(function(e) {
e.preventDefault();
$('#modal1').modal('hide');
$("#myPleaseWait").modal("show");
$('#myPleaseWait').on('shown.bs.modal', function (e) {
loadData();
});
});

How to detect handlebars-created non-initialized modal closal

I am creating, upon the press of a button, a modal window that comes from an handlebars template. At the document's load, the modal window is NOT initialized so you can't tie an event to it such as :
$(".modal").attr("someAttr").change(function(){});
Here is the code of the modal window and the hidden button that can be called to show the window once it's initialized.
<script id="informationModalTemplate" type="text/x-handlebars-template">
<div class="modal fade informationModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-body">
<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">
<textarea id="informationTextContainer" name="informationTextContainer">{{Content}}</textarea>
<a onclick="" class="button button-rounded button-reveal button-medium button-green tright"><i class="icon-thumbs-up"></i><span>OK</span></a>
<a onclick="" class="button button-rounded button-reveal button-medium button-red tright"><i class="icon-thumbs-down"></i><span>Cancel</span></a>
</div>
</div>
</div>
</div>
</div>
</script>
Can someone please tell me how to detect when such a window gets closed?

How to print a bootstrap modal popup?

Just now I am working on print function using JavaScript to print the content of my website. I can print the content of my site fine with just a direct content. But the problem is that printing the content with bootstrap modal popup seems to be different from what I have done. Below is the printing code of normal content I have implemented.
HTML:
<div id="printArea">
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="mSchedule" class="modal fade">
<div class="modal-dialog">
<div class="modal-content" style="width: 1000px;" >
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<button type="button" id="printer" class="btn btn-info">Print</button>
<h4 class="modal-title">Repayment Schedule</h4>
</div>
<div class="modal-body" id ="schedule-table">
</div>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function(){
$(document).on('click', '#printer', function (event) {
event.preventDefault();
var $print = $("#printArea");
$(document.body).wrapInner('<div style="display: none"></div>');
var $div = $('<div />').append($print.clone().contents()).appendTo(document.body);
window.print();
$div.remove();
$(document.body).children().contents().unwrap();
});
});
I know that this code is working fine with printing normal content, But I have no idea how to print a bootstrap popup modal.
Any help really appreciate.