fade in fullcalendar with a bootstrap modal - javascript

I'm trying to fade in a bootstrap modal that has a fullcalendar in it without having the fullcalendar pop in. how would I render the calendar before starting the modal fade in?
html
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id='calendar'></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
js
$(document).ready(function () {
$('#calendar').fullCalendar({
})
$('#myModal').on('shown.bs.modal', function (e) {
$('#calendar').fullCalendar('render');
});
});
http://jsfiddle.net/waspinator/HfSLs/3/

remove the fade class from the modal and change the JS to the following:
$(document).ready(function () {
$('#calendar').fullCalendar({
})
var shown = false;
$('#myModal').on('shown.bs.modal', function (e) {
if(shown === false) {
shown = true;
$('#calendar').fullCalendar('render');
$('#myModal').modal('hide');
$('#myModal').addClass('fade');
$('#myModal').modal('show');
}
});
});
http://jsfiddle.net/waspinator/HfSLs/5/

Related

Add class to the body when modal is open

I'm having a problem with my login modals. One modal open when someone click forgot password link on my sign in the modal. (One modal open in another modal) So I came everything clean by adding all necessary attributes.
Eg:
<span data-toggle="modal" data-target="#forgot-pin-popup" data-dismiss="modal">Forgot password?</span>
But I notice it won't add .modal-open class to the body when my second modal is open(styles are shown weird without this class). So I manually use this js script.
$('.modal').on('hidden.bs.modal', function () {
if($('.modal').hasClass('in')) {
$('body').addClass('modal-open');
}
});
Works perfectly BUT when I try switching models like 6 times. It won't work again. Can't imagine why. I can't show you an example because it's on my production site. Does anyone face the similar problem like this?
Try to do using modal id
On modal show
$('#forgot-pin-popup').on("shown.bs.modal", function() {
$("body").addClass("modal-open");
});
On modal hide
$('#forgot-pin-popup').on("hide.bs.modal", function() {
$("body").addClass("modal-open");
});
what about using a global event listeners:
$(document).on('hidden.bs.modal', '.modal', function () {
$('body').toggleClass('modal-open', $('.modal').hasClass('in'));
});
Try to use body instead of .modal
$('body').on('hidden.bs.modal', function() {
if ($('.modal.in').length) {
$('body').addClass('modal-open');
}
});
Also make sure that your modal should not be nested into .modal class
$('body').on('hidden.bs.modal', function() {
if ($('.modal.in').length) {
$('body').addClass('modal-open');
}
});
$(".btn-primary").on("click", function() {
console.log($("body").attr("class"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- Modal -->
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" data-dismiss="modal">
Open modal
</button>
</div>
</div>
</div>
</div>
<!-- Modal1 -->
<div class="modal fade" id="myModal1" 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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

e.preventDefault is not working while openning A modal after changing modal-text. modal is openning without changing content

I am trying to change the modal-body text when modal trigger button is clicked . But modal is openning but modal-body text is not changing .
This is the code for modal
<button type="button" class="btn btn-info open-modal" data-remote="false" data-toggle="modal" data-target="#myModal">Register</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Then source for preventing default event
$('.open-modal').click(function(e)
{
e.preventDefault();
alert('hello i am jquery');
$('#myModal').modal('show');
});
Why alert('hello i am jquery'); line is not executing ?
This may happen when your HTML takes precedence over jquery since your button specifes the target modal to open with the following attributes
data-remote="false" data-toggle="modal" data-target="#myModal"
Remove those and then the jquery will be fine
$('.open-modal').click(function(e)
{
e.preventDefault();
alert('hello i am jquery');
$('#myModal').modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info open-modal" >Register</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
To trigger a modal to show programmatically, you can use the following:
$('#myModal').modal('show');
You can also have an event handler being triggered and add your code in there:
$('#myModal').on('shown', function() {
alert('hello i am jquery');
})
In my case: Below code worked properly if the case fails:
$('#myModal').modal({show: 'false'});

Using Twitter Bootstrap Modal

I am having soon issues using the twitter bootstrap modal in my site. My site has the has bootstrap loaded and everything but the button is not trigger the popup and I don't know why. Can someone please help me?
This is the modal right after my body tag
<div class="modal fade" id="myModal" 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" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You can try this.
$(document).ready(function() {
$("#btnshow").on('click', function(event) {
$('#myModal').modal('show');
$('#myModal').on('shown', function() {
// do more here
})
});
});
sample button that calls your modal window
<button id="btnshow">Show</button>
<div class="modal fade" id="myModal" 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" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. Here’s the simplest possible example:
http://bootboxjs.com/examples.html
bootbox.dialog({
title: "That html",
message: '<img src="images/bootstrap_logo.png" width="100px"/><br/> You can also use <b>html</b>'
});

How set a value in modal action url

when click in delete button the modal delete button link have a value from delete button.
my code
<script>
$(document).on("click", "#myModal", function (e) {
e.preventDefault();
var _self = $(this);
var myBookId = _self.data('adid');
$("adid").val(myBookId);
$(_self.attr('href')).modal('show');
});
</script>
delete button code
print'<td><button class="btn btn-danger" data-toggle="modal" id="myModal" data-target="#myModal" data-adid='.$cd[$i][0].'>Delete Item</a></button>
modal code
<div class="modal fade" id="myModal" 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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Heads Up!
<p>What you are doing will delete a data!</p></h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success"><a href="a=yes&adid=" >Delete</a></button>
</div>
</div>
</div>
</div>
when click in delete item button then show a modal and this modal delete link have a url like ?a=yes&adid=
after &adid have a value that come fro delete item data-adid.
but my code not work
First of all you have the same id(myModal) for delete-button as well as for modal.
Try below code
<button class="btn btn-danger" data-toggle="modal" id="deleteBtn" data-target="#myModal" data-adid='.$cd[$i][0].'>Delete Item</button>
<div class="modal hide" id="myModal" 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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Heads Up!
<p>What you are doing will delete a data!</p></h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success"><a href="" >adid=''</a></button>
</div>
</div>
</div>
</div>
script
$(document).on("click", "#deleteBtn", function (e) {
e.preventDefault();
e.stopPropagation();
var link = $(this).attr('data-adid');
$("#myModal .btn-success a").attr('href',link);
$(".modal").modal("show");
});
JSFIDDLE

onclick $(document.body).append() is not working

here i want to show bootstrap modal on onclick event. Onclick event alert() is coming but $(document.body).append() (modal code) is not initializing it seems... i am not getting any error in console also...
this is my code...
(function() {
tinymce.create('tinymce.plugins.wpc', {
init : function(ed, url) {
ed.addButton('wpc', {
title : 'Add Contact Us form',
image : url+'/dd_note.gif',
onclick : function() {
alert("hii"); // it's coming on onclick event
$(document.body).append('<div class="modal fade" id="myModal" 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" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Forms List</h4> </div> <div class="modal-body"> <script> showForms("'+url+'"); </script></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button data-dismiss="modal" type="button" class="btn btn-primary" onclick="addForm()">Add Page</button> </div> </div> </div> </div>');
$('#myModal').modal();
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('wpc', tinymce.plugins.wpc);
})();
can anyone suggest me what's going wrong with my code?
Thanks in advance
In your html there are is script tag and some browsers does not allow to add it as text so u have to create script dom element from javascript and then append it or try something like this:
to replace in your appending html:
<script> showForms("'+url+'"); </script>
to:
<script> showForms("'+url+'");</' + 'script>
to allow browser to know that it is script tag.
working demo for appending this html
Try this
(function() {
tinymce.create('tinymce.plugins.wpc', {
init : function(ed, url) {
ed.addButton('wpc', {
title : 'Add Contact Us form',
image : url+'/dd_note.gif',
onclick : function() {
alert("hii"); // it's coming on onclick event
$('body').append('<div class="modal fade" id="myModal" 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" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Forms List</h4> </div> <div class="modal-body"> <script> showForms("'+url+'"); </script></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button data-dismiss="modal" type="button" class="btn btn-primary" onclick="addForm()">Add Page</button> </div> </div> </div> </div>');
$('#myModal').modal('show');
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('wpc', tinymce.plugins.wpc);
})();

Categories