Develop Reference

how can i create a modal by remote and initial textbox in the same function using jquery?

script.js
function change_val(){
$("#remoteModal2").modal({
remote:"modals/edit_text_value.html",
show:true
});
$("#my_textbox").val("this is a text")
}
index.html
<div class="modal fade" id="remoteModal2" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
<button onclick="change_val()" >show modal</button>
edit_text_value.html
<div class="modal-header">
header
</div>
<div class="modal-body">
<textarea id="my_textbox"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
</div>
The problem is that I must run it twice to make it work !
How to do all the operations in a function ?

shown.bs.modal OR show.bs.modal
When we use this code :
.on('shown.bs.modal')
.
$('#remoteModal2').on('shown.bs.modal', function (e) {
$("#my_textbox").val("this is a new text);
return e.preventDefault();
});
import modal (remote "edit_text_value.html")
Open modal
After the completion of loading and effects , change value..
show new value...
But this code :
.on('show.bs.modal')
Apply the changes ,Before reading the tags and remote the modal...
Therefore, it is not effective.
Because it can not find this ID (#my_textbox) Before remote modal page!
more information...

How to close Bootstrap 3 modal programmatically on AJAX success?

I have a code that what I wanted to do is to close the modal on ajax success. This is my code:
script
success: function() {
console.log("delete success");
$('#deleteContactModal').modal('hide');
$( "#loadContacts" ).load( "/main/loadContacts" );
}
html
<div class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<!--everything goes here -->
</div>
</div>
</div>
Everything just works except when the code $('#deleteContactModal').modal('hide'); triggers, it just shows a black faded screen like this:
The modal closes but the black faded color is still present. Am I missing something here? Thank you in advance.
I'm using bootstrap 3.3.

try to add this attribute with your modal div aria-hidden="true"
eg:
<div aria-hidden="true" class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
Here is my working example
<div class="modal fade" id="copy_course_modal" tabindex="-1" role="dialog" aria-labelledby="copycourse" 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="purchaseLabel">Copy Chapter</h4>
</div>
<div class="modal-body">
Modal body content here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="saveCopiedCourse()">Copy Course</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and on success doing same.
$("#copy_course_modal").modal('hide');

I have the same exact problem and the only way I could find to work is to individually remove the parts of the modal is generating. Just put this function in yous js and make an onclick event at your button in your html or js. Hope I helped.
function hideModal(){
$(".modal").removeClass("in");
$(".modal-backdrop").remove();
$('body').removeClass('modal-open');
$('body').css('padding-right', '');
$(".modal").hide();
}

Try:
$(".modal.in").modal("hide");
This will hide the currently active modal.

Ran into this issue myself in a similar situation.
It seems to be related to the asynchronous nature of javascript + bootstrap animations.
It's a dirty, dirty hack, but wrapping the call to 'hide' in a timeout made it work for me:
setTimeout( function(){$("#myModal").modal('hide')}, 300 );
If employing this "solution" to the problem, you may need to adjust the timeout value. Bootstrap animations seem to take around 125 - 200 ms, so 300 provides a nice safety buffer.

$('#deleteContactModal').modal('hide')
Find this link
https://getbootstrap.com/docs/3.3/javascript/#modal-hide
It gives detail https://getbootstrap.com/docs/3.3/javascript/#modal-hide regarding model window

Simple programmatically click close button of dialog.
$("button[data-dismiss=\"modal\"]").click();
This will automatically close dialog.

This issue will solve by hiding individual elements of modal.
Such as :
$("#modal").modal('hide');
$('body').removeClass('modal-open');
$(".modal-backdrop").remove();

I tried several of the proposed solutions and the only one that worked for me was:
$(".modal.in").modal('hide');
Some did clear the modal and the backdrop but then it did not redisplay on
subsequent invocations.

$.ajax({
type: "POST",
url: "admin/pc-item-insert.php",
data: $(this).serialize(),
success: function(data) {
$("#showinfo").html(data);
$(".modal").modal("hide");
},
});

This is just a timing problem. The Fade animation takes time and javascript cant close it. just cancel the fade animation and it works properly!
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
...
</div>
(Not use class="modal fade", jus class="modal")

None of these options worked for me apart from the one that said don't use modal fade. However I wanted to use modal fade. My code was making an ajax call to save changes, and then on success was doing this:
$('#myModal').modal('hide');
doRefresh();
The problem was doRefresh was then updating the page under the modal. If I removed the doRefresh, it worked. So what I ended up doing was this:
$('#myModal').modal('hide');
setTimeout(doRefresh, 500);

To clear the backdrop
$(".modal-backdrop").toggleClass("hide, show");
tested in bs4

I define my modal :
<div class="modal fade" aria-hidden="true" role="dialog" id="modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button id="btnCloseModal" hidden type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Waiting</strong>
</div>
<div class="modal-content">
<div>
Please don't close your tab!
</div>
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<div class="modal-footer">
<strong>Loading...</strong>
</div>
</div>
</div>
</div>
then I create function :
var StopLoadingAnimation = function () {
$('#modal').on('show.bs.modal', function (e) {
console.log("trigger show");
$("#btnCloseModal").trigger("click");
});
$('#modal').on('shown.bs.modal', function (e) {
console.log("trigger");
$("#btnCloseModal").trigger("click");
});
$('#modal').on('hidden.bs.modal', function (e) {
console.log("event");
$(e.currentTarget).off('shown');
$(e.currentTarget).off('show');
});
$("#btnCloseModal").trigger("click");
}
My idea is after ajax success is will call function StopLoadingAnimation what will trigger event click on element btnCloseModal ( It like you click button btnCloseModal when you closing modal )

Getting the id of the anchor tag which was clicked

This is a list representation of data which is coming from a php database.The list is fetched using a foreach php loop and the data inside the achor tag is populated accordingly.
<?php foreach($array as $iterate):?>
<div class="col-sm-3">
<div class="panel panel-default">
**<a onClick='theFunction();' id="hello" href="#myModal" style="text-decoration:none;">**
<div class="panel-heading">
<img src ="audi_sillhouete.jpg" style="height:100%; width:100%;">
<p id="10" style="position:absolute; top:10%; padding-left:5%; padding-right:15%;"><?php echo $iterate->test_name ?></p>
</div>
</a>
</div>
</div>
<?php endforeach;?>
As you can see here, inside the anchor tag i have href-ed it to a modal box which will show a message whenever the user clicks on any of the link. There is a button in the modal window which will take the user to a different page.
The issue is that i want to pass certain value along with the url, but cannot do so as the link to the next page is defined in the modal window specification part.
So i came up with this solution. I thought of using the id attribute of the anchor tag, I tried to get the id attribute of the anchor which was clicked using javascript.
<script type="text/javascript">
function theFunction()
{
var id = $('a', this).attr('id');
alert(id);
}</script>
From this i wanted to initialize a php variable and then use that php variable to pass as value in the href of the modal window button. But the value i am getting in the alert box is 'undefined' for some reason. I have tried all possible combinations of this.
$('a',this).attr('id');
$this.id;
Everything return 'undefined'.
Reference-This is the code for the modal window part.
<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">Instructions</h4>
</div>
<div class="modal-body">
Your test is about to commence. A timer will be initiated after the moment you start the test. You may choose to answer a question, or leave it empty. You can also attempt the questions in any order that you find suitable.<br><br>Upon completion of the test, click on "Submit" to see your performance statistics.<br><br><br>Good luck!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Continue</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Please try this
$(document).on('click', 'a', function () {
alert(this.id);
});
DEMO

You can use other attribute in anchor like :
<a href='' id='hello' para-id='somevalue'></a>
alert($("#hello").attr("para-id"));

The below jQuery function runs through all the a tags on page load and adds id to the end of the link.
$(function(){
$('a').each(function(){
var id = $(this).attr('id');
var url = $(this).attr('href') + '?id=' + id;
$(this).attr('href',url);
});
});
https://jsfiddle.net/yc1hswet/

Bootstrap Modal Not Displaying, outputs JS

I have a bootstrap modal setup with the following code:
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Testimonials</h3>
</div>
<div class="modal-body">
<p>Test Text Here</p>
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal">Close</a>
</div>
</div>
<button class="btns btn-3 btn-3g btnsx" data-toggle="modal" href="#myModal">More</button>
However, I am getting only a black background when clicking the button.
I am also seeing some of my js appearing at the bottom of my page (only when the modal code is inserted):
.on('submit', function() { var form = $(this); var post_data = form.serialize(); //Serialized the form data for process.php $('#loader').html('loadng Please Wait...'); $.ajax({ type: 'POST', url: 'http://shazconstruction.com/test/process.php', // Your form script data: post_data, success: function(msg) { $('#loader').html(''); // We know this is the form that needs fading in/out $('form#contactUs').fadeOut(500, function(){ $('form#contactUs').html(msg).fadeIn(); }); } }); return false; }); });
Here is the site where everything exists:
http://bit.ly/1dbf4Rz
For reference, this is the section with the modal setup:
http://i.imgur.com/1SlNR1s.png

Check out the source of your page. However it's being generated has a pretty clear error: http://screencast.com/t/GZv0KwPktoO
Look at line 762. There is no opening script tag, so that would explain why you're seeing your JS appearing at the bottom of the page.
As for the rest of it, BaBL86 is right, you will want to fix the issue with your mousewheel script as it's throwing errors that cause the page to stop rendering JS.
Once those two issues are fixed, let us know if there are still problems.
Edit: You also have incorrect HTML for your modal window (based off the bootstrap 3 documentation). Try using this instead, and moving your modal window to right after the 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">
<a class="close" data-dismiss="modal">×</a>
<h3>Test Header</h3>
</div>
<div class="modal-body">
<p>Test Text Here</p>
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>

You have an error in your mousewheel function. Check this answer, it's about this problem:
function handler(event) {
< ---- >
return $.event.handle.apply(this, args); // error here
}
Edit your function to:
return $.event.dispatch.apply(this, args);

You have given !important to .hide. Remove the imporant
From this
display: none!important;
To
display: none;
I can also see that you are not giving any background-color. Use the same code from bootstrap

Passing Data to Bootstrap Modals

I am trying to create a simple modal using twitter bootstrap. The function of that modal is to take the name of the link clicked on, and use that name as a header. Each of the names are in a Django Database. I followed this link for reference: Passing data to a bootstrap modal
#Button to toggle modal
<a data-toggle="modal" data-id="{{ name }}" title="Add this item" class="open- AddBookDialog " href="#addBookDialog">{{ name }}</a><br />
#Modal
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="text" name="nameId" id="nameId" />
<p>some content</p>
</div>
</div>
#JavaScript
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myNameId = $(this).data('id');
$("modal-body #nameId").val( myNameId );
});
</script>
What the above does is displays a text box with the characters name in the box. What I would like is to have the name as the header, not in a text box. When I remove the textbox, and place a header tag with the same id and name, nothing will show. Is there a way to complete this task.

the header is the first h3 in the modal.
So you need to add a h3 element under ".modal-header" with an id and set the .html() of that element. :)
Look here for reference: http://twitter.github.io/bootstrap/javascript.html#modals
Here's the code:
#Modal
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3 class="hdrtitle">This is the header</h3>
</div>
<div class="modal-body">
<input type="text" name="nameId" id="nameId" />
<p>some content</p>
</div>
</div>
Using a code like:
$('.modal .hdrtitle').html('This is the header');
and then showing it with:
$('.modal').modal('toggle');
works.

The one-off way
If this is the only time you'll ever need to do a UI-binding behavior in your site/app, do something like this:
$('.header-link').click(function(e) {
$('.modal-header h4').html($(e.target).html())
})
CodePen Demo
This will just take the text (actually the HTML) in the link itself and put that in the header.
Using a library
If you plan to do these sorts of cool tricks in more parts of your app, consider using a UI-binding library like Angular JS or Knockout. This way you can data-bind parts of your UI with events.

I found the answer. Thanks to #PaoloCasciello for a layout.
Instead of an .on function in javascript, it really needed to be .html. So here is what the final code will look like.
<!-- Modal -->
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3 id="nameId" />
</div>
<div class="modal-body">
<p>some content</p>
</div>
</div>
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myNameId = $(this).data('id');
var myNameDescription = $(this).data('description');
$(".modal-header #nameId").html( myNameId );