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.
Related
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">
I have a bootstrap modal working well by a button click. But if I show the modal at the end of the , console says:
$(...).modal is not a function
My scripts in real sequence:
'js/jquery.min.js'
'js/jquery.easing.1.3.js',
'js/bootstrap.min.js',
'js/jplayer/jquery.jplayer.min.js',
'js/jquery.nicescroll.min.js',
'js/jquery.nicescroll.plus.js'
My Html:
<!-- Modal -->
<div class="modal fade" id="divConteudoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="height:40px; border:none;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<iframe name="janelaModal" id="janelaModal" style="width: 100%; border: none; min-height: 350px;"></iframe>
</div>
</div>
</div>
</div>
Trigger:
$(document).ready(function(){
$('#divConteudoModal').modal('show');
});
If I run $('#divConteudoModal').modal('show'); directly at console it works, if I put before /body, as I mentioned above, I get $(...).modal is not a function.
Can you guys see anything that can causing that?
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?
So if I have two different Models the content within the second model doesn;t show up instead it's the content of the first model. How can i get two individual Models with different contents
EXAMPLE Model 1:
<!-- Button to trigger modal -->
modal 1
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
EXAMPLE MODEL 2:
<!-- Button to trigger modal -->
modal 2
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">this is different</h3>
</div>
<div class="modal-body">
<p>this ones different but yet when you click it the content of the first Model appears.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">diffent</button>
<button class="btn btn-danger">Quit</button>
</div>
</div>
my goal is for when I click on the second modal button for the content to be what is in the second modal and not whats in the first Modal again. I want them both to be different.
Use 2 different modal id's....
<!-- Button to trigger modal -->
modal 1
<!-- Modal -->
<div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
...
<!-- Button to trigger modal -->
modal 2
<!-- Modal -->
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
...
Demo on Bootply: http://bootply.com/80525
I like the Bootstrap library by Twitter and I would like to try to use into it in my simple page. I need there after loading the page automatically display the modal window. Could anyone give me a tip, how is possible to do it?
well that shouldn't be too hard... do something like this:
jQuery(document).ready(function($) {
$('#my-modal').modal(options)
});
Your modal...
<div class="modal fade" id="formSaludo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
If ulike modal opened... Use style="display: block;" and class="modal fade in"
<div class="modal fade in" id="formSaludo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: block;">
This modal load when the page is ready.
<body>
<div id="top">
<a tabindex="-1" href="#" id="metadata-link" data-target="#modal" data-toggle="modal">Metadata</a>
</div>
<div id="modal" class="modal hide fade in" style="display:none;">
<div class="modal-header">header<a class="close" data-dismiss="modal">x</a></div>
<div class="modal-body"></div>
<div class="modal-footer">footer</div>
</div>
<script>
$(document).ready(function() {
$('#top').find('a').trigger('click');
});
</script>
Best regards.