We Keep Coding

Making a modal window only show once

I use a Bootstrap modal on the index page of my site, but I only want it to show Once per user visit.
I've tried out the answers shown here:
Display A Popup Only Once Per User per-user but the problem I run into is that the javascript "popup" conflicts with my modal "onload". And I'm not sure how to resolve it.
This is my onload function:
$(window).load(function(){
setTimeout(function() {
$('#onload').modal('show');},2000);
});
and this is my HTML:
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="onload">
<div class="modal-dialog">
<!-- Modal content-->
</div>
</div>
I tried to wrap the whole modal div with the "popup" div but that did weird things to my website (dimmed the whole page but otherwise did nothing)
I think I need to use a cookie or localStorage but I don't know how to configure them or trigger them from the onload javascript.

on('click'....) only fires after the second click

Here's the script. When I click it on load, works like a charm. When I click it via a dynamically created element, the first click sees the actual html shift (kind of stretch and go back). It does however work on the second click consistently.
<script>
$(document).on('click', '.iframe_add', function(){
var element = $(this).attr('name');
$('#iframe_target').html('<iframe src="https://104.131.18.58/t3/default/ajax_new_secured_asset_debt_creator?all='+element +'" frameborder="0" width="580" height="300" scrolling="yes" id="myFrame"></iframe>');
});
</script>
I dont really get whats going on and Id appreciate any help.
P.S. I saw this one, but am not sure if it applies (seems to deal with some datepicker issues)
jquery on.click doesn't work on first click (with a dynamic element)
EDIT:
Here is the HTML
<div id="iframe_modal" class="modal fade" 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">X</button>
<h4 class="modal-title">Edit Information</h4>
</div>
<div id="iframe_target" class="modal-body">
</div>
</div>
</div>
</div>
EDIT 2 - Console Logs (all the same):
New

Your console log:
New
reveals that one of the classes is iframe_input.
Your JavaScript is telling us that you want the click event to fire when an element with a class named .iframe_add is clicked.
Try
$(document).on('click', '.iframe_input', function(){

Ok. So here is the hackity-hack solution I came up with (if you cant beat em -- and by em, I mean javascript, join em):
parent.document.getElementsByClassName("iframe_input")[0].click();
I just force a click on the first input element when the modal hides and this seems to resolve the behavior. That being said, this seems really hacky and Im all ears as to why this is wrong but it does work like a charm....

You must check if you don`t get error -> Cannot read property 'addEventListener' of null
If yes you must add code document.getElementById('xxx_element_name_xxx').addEventListener('click', xxx_function_name_xxx, true); after place where your element xxx_element_name_xxx was declared.

Got the same issue in my ASP.Net Web Form. My case is I create toggle button to hide and display div.
I get rid this problem by embeded the initial style during loading page which is display: none at div itself rather than put it in external css file.
<div id="toggleDiv" style="style:none">
</div>

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();

Bootstrap Modal not scrollable when opened with jQuery

I have a bootstrap modal set up but I populate it with data retrieved via the jQuery ajax function. If the modal is opened using the following code, then it opens fine, and is scrollable.
<button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#editContact"><i class="fa fa-pencil"></i></button>
However, as I populate it with data, I call a JavaScript function to do the ajax call, and populate it with the data. The function is called on button click, like so:
<button type="button" class="btn btn-warning btn-xs" onclick="open_contact(2);"><i class="fa fa-pencil"></i></button>
Which calls the follow JavaScript function:
function open_contact(id)
{
$.post("contacts/get",
{
// Posts relevant details to show the right content
},
function(data, status) {
// Code here to check for valid response etc
$('#editContact').modal('show');
});
}
This JavaScript works fine - it throws no error and it retrieves the data fine. It also opens the modal fine. However, when the modal is opened with the JavaScript rather than with the first button (with the data-target), the whole browser window scrolls rather than just the modal.
For reference, the modal opening tags:
<div class="modal fade" id="editContact" tabindex="-1" role="dialog" aria-labelledby="editContact" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Does anyone have any suggestions please?
Edit
I should just clarify that my issue isn't the fact that I don't have scroll bars. The issue I'm having is when I scroll using the mouse wheel for example, the page behind the modal will scroll, but the modal doesn't move. Therefore, any text hidden from view in the modal, never comes into view.

I think the comments to your question are right, not showing the scrollbar is the intended behaviour.
Class modal-open gets added to the HTML body when you show the modal, and removed when you hide it.
This makes the scrollbar disappear since the bootstrap css says
.modal-open {
overflow: hidden;
}
To achieve what you want - showing the scrollbar - you can override the native css by specifying
.modal-open {
overflow: scroll;
}
in your own css file.

jQuery terminal + bootstrap

I'm using a jQuery terminal (http://terminal.jcubic.pl/) with bootstrap on my page.
I'm trying to get the terminal to be inside a modal, I got the modal thing to work and I press two buttons to open up the modal..
But whenever I load the page I have to click somewhere on the body before I can press them otherwise nothing happens i doesn't even react on my clicks.
What am I doing wrong?
Terminal:
$('#terminal').terminal(function(command, term) {
if (command == 'help') {
term.echo("available commands are system, test ");
}
});
My modal:
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Terminal</h4>
</div>
<div class="modal-body">
<div id="terminal"></div>
</div>
</div>
</div>
</div>

Apparently, when a page loads, there is no way to capture the Ctrl key from within the page without previous explicitly setting the focus on it.
You can set focus programatically, but you can't get the 'Ctrl' key... As far as I've looked up, this is the only key you can't use when the page loads, before acting on the page.
You should either consider changing your combination of keys, or forcing the user to click on the page, by, for example, a message he has to acknowledge.
Other than that, your code is working. The only flaw I see is that you close </body> twice.

This is old but for reference, in this question Bootstrap modal show event the answer say, how to add event when bootstrap modal is show (you use shown event). so you can use this:
$(document).ready(function() {
var term = $('#terminal').terminal(function(command, term) {
if (command == 'help') {
term.echo("available commands are system, test ");
}
}, {enabled: false});
$('#myModal').on('shown', function() {
term.enable();
})
});