We Keep Coding

how to call a function after reveal-modal appears

I am working in a foundation frame work for responsive.
on click of a link say
Click Me For A Modal
<div id="myModal" class="reveal-modal" data-reveal>
<h2 id="modalTitle">Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins! </p>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
I want as the window opens the focus is given to the myModal.
i am trying
$('a.button').on('click', function() {
$("#myModal").attr("tabindex","0").focus();
});
but it not working.
My script is running before the modal window opens and thus there is no such element available to receive focus.

You can set the focus on the whole modal.
$('a.button').on('click', function() {
$("#myModal").focus();
});
Is this what you where looking for?

Open more than one materialize modal on same page in meteor js

id of 1st modal is "modal1" and 2nd modal id is "modal2"
HTML code ->
1st Modal Call on Same Page
<div class="input-field col s12 m6 left-align">
<button class="btn waves-effect waves-light modal-trigger importButton" style="height:45px !important">Import Data
<i class="material-icons right">import_export</i>
</button>
</div>
2nd Modal Call on Same Page
<div class="modal-trigger" style="cursor: pointer;">
<img src="abc.png" alt="" class="circle">
</div>
JS Code ->
'click .modal-trigger': function(event) {
event.preventDefault();
$('#modal1').openModal();
},
'click .importButton':function(event) {
event.preventDefault();
$('#modal2').openModal();
}

You have to give refrence of another template {{>import}} (my template
name is import) in which my modal2 is defined.

Your question is not very clear. From what I understand, there are 2 modals that can be opened from the same template. The catch here is that bootstrap does not support multiple modals stacking up over each other.
Multiple open modals not supported Be sure not to open a modal while
another is still visible. Showing more than one modal at a time
requires custom code.
So, before the first modal is open, you must first always check if the other modal is in closed state, and similarly, before the second modal is open, you must check if the first modal is closed, if not then close it.
There is one package in meteor that appears to help handle multiple modals. you can check out peppelg:bootstrap-3-modal to get a better implementation of bootstrap modals in meteor. Specifically the part where they mention the use of below:
Modal.allowMultiple = true

Bootstrap Modal not responding

I am using a modal that I used from a previous site where it works fine. Difference is this modal will only appear in IE9 only to direct users to a better browser. I was able to test it with just a alert and works fine.
However, for some reason, when I transfer the code I did for a previous site to this new site, the Modal isn't responding and to one point is not showing on the site.
When I try close the "Close" button, it will just refresh the page. I am not sure why and when I close the "X" button, it does not work either.
The code is inserted in a coldfusion file and I am not sure if it causing conflict or not.
Any help would be appreciated.
Here is what I did for the modal. ie-only detects whether it is IE9 or not:
<!---<div class="ie-only" style="overflow-y:hidden;">
<div class="modal fade in" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background-color:##428bca">
<button type="button" class="close" data-miss="modal">x</button>
<h3 class="modal-header" style="background-color:##428bca; text-align:center">Attention</h3>
</div><!---Modal-Header Div--->
<div class="modal-body">
<p style="text-align:center">You are using an outdated browser.<br /> <br /> Upgrade your browser today to better experience this site.</p>
</div><!---Modal-Body Div--->
<div class="modal-footer">
<p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p>
</div><!---Modal-Footer Div--->
</div><!---Modal-Content Div--->
</div><!---Custom Height Div--->
</div><!---Modal Fade in Div--->
</div><!---Start of Modal Div--->
<!--End of Modal container--> --->
<!---<script>
$(function(){
$('##myModal').modal('show');
}
</script>
<div class="modal-backdrop fade in"></div>--->

It looks like there is a syntax problem in your code:
$(function(){
$('##myModal').modal('show');
}
This is incorrect; it should be:
$(function(){
$('#myModal').modal('show');
});
When corrected the Modal loads as a Modal, which in turn causes the Close button to operate as expected. Absent this the modal still loads (because you have in activated) but loads absent the overlay and absent the hook to Bootstrap's Modal JS which explains why your close button is non-functional.
You can see a functional example here: http://www.bootply.com/24IPYP8O3F
Why your code isn't working
The in class on your Modal div instructs Bootstrap to make that modal visible, and position it according to the Bootstrap CSS. Your jQuery is wrong though, so Bootstrap treats this like a bit of HTML that is just part of the document.
Once you correct your jQuery Bootstrap processes it as expected; as a Modal Javascript component. Once that happens it is presented with the overlay (as default) and the data-dismiss attributes are processed correctly.
The short of it is that the entire issue for why your Modal is not behaving like a Modal is that your jQuery is wrong.

Multiple reveal modal is not working

Multiple reveal modal is not working. Example,
I have 2 screens, If I click reset button one reveal popup is open. without closing that popup if i open another screen and open one more reveal modal, the previous screen reveal modal is hided. Both screen has having same class name for reveal modal. I have to use same class name. But different pages. How can resolve this issue?
My requirement is, if I open multiple pages also all reveal modal should be display properly without hiding.
Please Check the below fiddle. It is only one page. Same as If I have another page it will create a problem.
Fiddle
$(document).foundation();
$('a.open-first').on('click', function () {
$('#first-modal').foundation('reveal', 'open', {
multiple_opened: true
});
});
<div id='second-modal' class='reveal-modal' data-reveal aria-hidden="true" role="dialog">
I'm the secondborn!
<a class="close-reveal-modal">×</a>
</div>
<div id="first-modal" class="reveal-modal" data-reveal aria-hidden="true" role="dialog">
I'm the firstborn!
Modal in a modal…
<a class="close-reveal-modal">×</a>
</div>
<a class='open-first'>Click me!</a>

Multiple bootstrap modals in a page

I made a bootstrap modal - it's working fine. But when I want to use a modal somewhere else in my site it overwrites the other modal.
Which part of the code do I need to change? And do I have to add like thousands of extra code to javascript for each modal, or can I make a group code?
Thanks!
I added this:
$('#clickme').click(function(e) {
$('#showModal').modal('show');
<script>
function showModal(){
$("#showModal").modal("show");
}
</script>
and:
<div class="modal fade" id="showModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sign me up!</h4>
</div>
</div>
</div>
</div>

Don't try to do this. Bootstrap's modal is not designed to support that. Its own documentation says
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
It should have said "a lot of custom code". For instance, BS modals use a class on the body element, that is removed when it closed. Therefore, closing a second modal will also hide the first. Then you need special code to detect that a modal was previously open and restore the class on the body. It's much more trouble than it's worth.
Instead, use a "poor man's modal" for the second modal, just an absolutely positioned div you pop up somewhere. You don't need the overlay covering the screen anyway since it's already there from the first modal.