Hello devs, how's ur wk going, has anyone here had issues while working with bootstrap's modal?
The issue I have in particular is working with jquery in the .modal-body, e.g I have an element div#my_div inside d modal body, when I do something like this inside my external js file, it doesn't respond(I.e to d event): $('div#my_div').click(function(){
alert()
})

But it works if d event was attached to an element in d .modal-header or .modal-footer

Give your modal div an id, now on the element you want to use outside the modal div, use an anchor tag and set the href to the id of your modal div. Then on the element also add this attr data-toggle="modal". Also make sure you bring in the bootstrap.js file

Tnx 4 ur contrib. I guess u didn't get my Q. I can actually access (launch n dismiss) d modal. My question/issue is abt listening to events on elements inside d .modal-body, e.g let's say we have .modal-body>div>span#text, n we have a JQ event listening inside an external JS file like:
$('span#text').click(function(){
alert()
})

I expect it to show an alert box onclick of d span#text, just like it'll show if I did d ffg inside d .modal-body
<span id='text' onclick='alert()'>hi </span>

Note: d BS modal is divided into 3 parts each with its own class: modal-header, modal-body and modal-footer

Trollin'

I strongly believe your script is running before your page is ready. Take the script tag to the bottom of the page and not at the top. If this doesn't work try and share your markup and script let's see

My script's already at d bottom of d page sir.
Note that what I'm trying to achieve works in d .modal-header and .modal-footer

abdul01:
My script's already at d bottom of d page sir.
Note that what I'm trying to achieve works in d .modal-header and .modal-footer

I have recreated the experiment here and it works. So unless you can share your script and markup i cant know much. Besides have you tried debugging with the developer tools of your browser?

Yer I did with devtools,
I'v posted a prototype of my script already, can u pls post urs so I can compare it with mine. Tnx a lot

<div class="modal " tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button id="abdul" data-dismiss="modal">CLICK ME</button>
</div>
<div class="modal-body">

</div>
<div class="modal-footer">

</div>
</div>

</div>
</div>


$(function() {

$("#abdul" ).on("click",function () {
alert('CLICKED ME');
});
});

Tnx. But this isn't what I'm looking for.

Well I'v gotten a hack around d issue. The content of d modal is actually loaded ajaxically(sorry, I didn't state this b4), I.e it's not part of d page from scratch, that's why it's not being caught by d JQ event listener.
What I did was to place d event listener as a callback of d ajax function $.ajax().done()
So d event listener only listens after d content has been loaded.

Another way to have done this(I guess) is to extend d time frame for $(document).ready() by using d $.holdReady() function. Although I didn't break-through with this 2nd method, but I guess it should work. You can read more abt it on api.jquery.com

Tnx to my oga pffft et al.