Develop Reference

bootstrap modal cookie not showing

I'm trying to show a bootstrap modal when the page loads (only 1 time) and set a cookie for 7 days. But something prevents the modal to show up. If I don't use the jquery-cookie the modal turns up. What am I doing wrong?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if ($.cookie('pop') == null) {
$('#myModal').modal('show');
$.cookie('pop', '7');
}
});
<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
test
</div>
</div>
</div>

Adding alert($.cookie('pop')); doesn't do anything different. Still no popup or other message.

How to delay modal iframe until full data load?

Is it possible to show a modal window only if embedded iframe is fully loaded (an embedded pdf)?
//triggered by frontend
$scope.onmodal = function() {
$scope.url = "dynamic generated url";
$('#myModal').modal({
show: true, //how to delay?
backdrop: true
});
};
My html:
Trigger Modal in iFrame
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="position:inherit !important;">
<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">PDF View</h4>
</div>
<div class="modal-body">
<iframe ng-src="{{url}}" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
</div>
</div>
</div>
</div>
I want to trigger the modal popup on button click, but delay it until the embedded url (a pdf) has been fully loaded.
Because the pdf is generated in the backend, and a long running process (10 sec).
Is it possible?

Bootstrap 4 - Avoid modal closing for on-screen click

In rails 4, I am using bootstrap plugin. When I am using modal feature there is close event issue which I need to solve. When modal opens, it should get close when I click on 'x' icon or 'Esc' button otherwise it should be open always. Right now when I click on the screen which excludes the modal form area it will get close.
In main.erb,
<div class="modal fade" id="main-lightbox-container" tabindex="-1" role="dialog" aria-labelledby="main-lightbox-container" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
In form.js.erb,
var content = "<%= escape_javascript(render(:partial=>"form", :locals=>{:user=>#user})) %>";
var container = $('#main-lightbox-container');
container.find('.modal-content').html(content);
container.modal({});
Here I am loading modal form via ajax request. How can I fix this on-screen click issue? Please help me.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script>
<div data-toggle="modal" data-target="#modalid">Open</div>
<div class="modal fade" id="modalid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<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>
</div>
<div class="modal-body" style="background-color: #F0F0F0">
Content
</div>
</div>
</div>

<div id="myModal" data-keyboard="false" data-backdrop="static">
just add data-keyboard="False" and data-backdrop="static" it works for me.

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.