We Keep Coding

Modal Disappears Quickly + Bootstrap + Javascript

I'd like to start with saying I've searched and searched for the solution to my problem -- and after trying everything I read -- no success. I just want to make a simple modal to pop up when a user clicks on a link (that isn't ready yet).
---Already Tried---
Made sure there wasn't a second bootstrap javascript file (especially in header)
Tried variations in javascript syntax
Tried variations in the link html
When I made the link a "button" then the modal was fine -- but I don't want a simple link to be a button.
$("body").on("click","#empty",function(event){
$("#myModal").modal()
})
<li>Our Blog</li>
I also tried
$(document).ready(function(){
$("#empty").click(function(){
$("#myModal").modal();
});
});
I suspect there's something wrong in the way the html is set up (since the modal worked for a "button" but wont for a regular link)
Let me know if you need more clarification -- Thanks for your help!

This is working modal... It may be helpful for you...
<script type='text/javascript'>
('#myModal').modal('show');
</script>
<li>Click Here</li>
<div id="myModal" class="modal fade" role="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>
otherwise try this code...
$(document).ready(function(){
$("#empty").click(function(){
$("#myModal").modal('show');
});
});

If your link "isn't ready yet" when you initiate the modal with Javascript it won't work.
Assuming that your link is created dynamically you have to make sure you initiate it once it is in the DOM, in a JS callback or however your link is created (instead of the Document.ready function).
Also worth noting that to initiate the default triggering (setup in the html with the 'data-' attributes) you simply use:
$("#myModal").modal();
But if you want to trigger it manually in a onClick function, you'll need to add 'show' or 'toggle:
$("body").on("click","#empty",function(){
$('#myModal').modal('toggle');
)};
Again, both of these codes needs wrapping up in a document.ready function or a callback when your link is in the DOM.

Bootstrap modal on hidden does not trigger

Like the title says i have problem to getting the modal.on('hidden') event to run. I can open the modal without any problems. The code im using for it looks something like this:
var info = $('<img src="img/icons/info.png">');
info.attr('data-toggle','modal');
info.attr('data-target','#infoPopup');
The modal itself looks like this:
<div class="modal fade" id="infoPopup" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="popupHeader" class="modal-title"></h4>
</div>
<div id="popupBody" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It Opens perfectly fine but it seems like the hidden event is not triggert when I'm closing it by clicking beside the modal the close button or the X on the top right.
$('.modal.in').on('hidden',function(){
console.log('test');
});
The selected modal is the correct one when i'm trying to access it on the console with $('.modal.in'). So i'm not trying to get a callback on the wrong modal. I also tried it with $('.modal.in').on('hidden.bs.modal',func...). But i got the same result.
Thanks for your help.

for bootstrap 3 you need to use hidden.bs.modal
$('.modal.in').on('hidden.bs.modal', function () {
// do something…
})
if your modal is not in DOM on load this should rather work
$(document).on('hidden.bs.modal','.modal.in', function () {
// do something…
})

Instead of using .modal.in use the id of the modal that you want to fire the event with. If you want to use it for all modals just use .modal and not .modal.in and you will use on hidden.bs.modal
here is a fiddle Fiddle
$('#infoPopup').on('hidden.bs.modal',function(){
alert("Modal Closed");
});

How can I fire a jQuery click event for dynamic content (modal)

I followed the instructions on this answer to copy a URL when user clicks a button. Seems to work fine, except when I move my button into a modal window. I lose my click event handler.
function copyTextToClipboard(text) {
[...] // working implementation
}
$(function() {
var currentPostUrl = window.location.href + "?ref=blogshare"
var currentPostTitle = $('.post-title').text().trim();
$('.js-copy-bob-btn').on('click', function(event) {
copyTextToClipboard(currentPostUrl);
console.log('copied')
});
$('#myModal').appendTo("body")
});
Here's my HTML:
<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row modal-icons">
<div class="col-xs-5 text-center">
<a class="copy-url js-textareacopybtn" title="Step 2: Copy URL Button">
<h3>Copy Shareable Link</h3>
</a>
<-- THE BELOW BUTTON DOES NOT WORK AS DESIRED -->
<button class="js-copy-bob-btn">Copy Url</button>
</div>
</div>
</div>
</div>
</div>
</div>
<-- THE BELOW BUTTON WORKS AS DESIRED (NO MODAL)-->
<button class="js-copy-bob-btn">Copy Url</button>
Where am I going wrong? Why does the second button (outside of modal) work but not the first button?

I'm guessing your modal is dynamic markup that is injected one way or another. There are various modal flavors/libraries out there, but my suspicions are that your dynamic content does not have the proper event handlers for this. jQuery provides a way for us to do this with delegate()
Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
I made a very simple example which demonstrates this specific scenario. I am crafting and injecting dynamic content, with a button, wired to click handlers via .on() and .delegate(). Observe the following example and differences between the two...
// faux modal
$('body').append('<div class="modal"><button class="js-copy-bob-btn">Copy Url</button></div>');
// does not work
$('.js-copy-bob-btn').on('click', function(event) {
console.log('copied via on');
});
// works - dynamic content
$('body').delegate('.js-copy-bob-btn', 'click', function() {
console.log('copied via delegate');
});
JSFiddle Link - working demo

fullcalendar remove event by popup modal strange behavior

I have made fullcalendar event remove popup modal.
This is partly working but there are strange behavior.
I am newbie to this, so I have tried several different way but I can't make the stange behavior away.
and I don't know how to make jsfiddle to reproduce the exact behavior without copying all my code. but my code contains a lot extra things. so I can't provide jsfiddle. and only the related code is stated here. but I think Someone who has good experience about this. I think they can easily see through the code. I am really appreciated for advice. I have spent too much time on it.
The strange behavior is that event remove by popup modal, it removes the other event which previously closed by close button. In the following explanation contains the details.
I have made like this:
1) div code for popup modal
<div class="modal fade" id="modalRemove" 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>
</div>
<div class="modal-body">
<h4>Are you sure to remove the event?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="close" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" id="removeBtn" data-dismiss="modal">Remove</button>
</div>
</div>
</div>
</div>
2) when an event is clicked -> popup modal displays -> then can choose (click) close button or remove button on popup modal
eventRender: function (event, element){
element.click(function() {
$('#modalRemove').modal();
$('#eventTitle').html(event.title);
$("#removeBtn").click(function() {
$('#calendar').fullCalendar('removeEvents',event._id);
});
});
},
What is working
Popup modal is working
close button, remove button is working
event is removed when remove button is pressed on the popup modal
what is strange behavior
let's say there are two events: test1, test2 (image1)
I clicked test1 event, then popup modal appears (image2)
then, I click close button on popup for test1 (Not remove)-> Popup is disappeared -> test1 event is still on fullcalendar as it should be.
====> until here works fine
then, I click test2 event-> popup modal appear like image 2 -> press remove button for test2 -> [problem]then both test1, test2 events are removed
why it removes both events after 1,2,3,4 steps?

Try this:
eventRender: function(event, element) {
element.attr('href', 'javascript:void(0);');
element.click(function() {
//set the modal values and open
$('#eventTitle').html(event.title);
// Rebind the Remove button click handler
$("#removeBtn").off('click').on('click', function(e) {
$('#calendar').fullCalendar('removeEvents', event._id);
});
$('#modalRemove').modal();
});
}
Note how all the click events are unbound from the #removeBtn button via off() prior to binding for the specific event.
(In your code every time you clicked an event in the calendar a new click handler for this event was bound to #removeBtn. Thus when you finally clicked "Remove" multiple handlers were executed.)

you can do this like this way
$(".popover").hide();

zclip not working within bootstrap modal

I'm using the clean example code provided by zclip page:
$('a#copy-dynamic').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input#dynamic').val();}
});
and this is the HTML:
Click here to copy the value of this input:
<input type="text" id="dynamic" value="Insert any text here." onfocus="if(this.value=='Insert any text here.'){this.value=''}" onblur="if(this.value==''){this.value='Insert any text here.'}">
It works fine if the HTML is inside the bootstrap main page, but it stops working if i move the html inside a bootstrap modal window (that is, inside the div element of the modal).
How can i get it work?

I had the same issue with zclip and bootstrap modals. The fix I applied was twofold:
Attach the zclip to the element inside the modal's 'show' function.
Add a 250ms delay before attaching the zclip to the element
This properly places the zclip within the modal. It also works if you have multiple tabs in the modal.
HTML
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<a class="btn" href="#" id="modal_body_button">Copy Undo Config To Clipboard</a>
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
JavaScript
$('#myModal').on('show', function () {
$("#modal_body_button").delay(250).queue(function(next){
$(this).zclip({
path: "/static/javascript/ZeroClipboard.swf",
copy: "copied text OK!"
});
next();
});
});

In example above can also use on('shown') instead of on('show') event which calls when modal completely showed. This helps to prevent using dirty hacks like delay(250)