javascript - bootstrap modal dialog box not appearing -


i have modal dialog box supposed show up, code follows:

        <span style="vertical-align:top;"><a href="#mymodal" role="button" class="btn btn-small btn-red" data-toggle="modal"> delete league </a></span>  <!-- start of modal dialog box --> <div class="modal hide fade" id="mymodal">   <div class="modal-header">     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>     <h3>modal header</h3>   </div>   <div class="modal-body">     <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>     <p>ut nunc libero, sodales venenatis gravida nec, posuere quis ante.       phasellus lobortis molestie felis, vitae sagittis ipsum vehicula lobortis.       </p>     <p>quisque lacus mi, gravida vel facilisis ac, malesuada vel augue.       in ac leo eget tellus aliquet aliquam. nam faucibus urna ac justo fringilla eu       sollicitudin quam pretium. proin pellentesque adipiscing sapien, non dignissim       massa porttitor dictum. integer tempor aliquam arcu, eget vehicula ipsum auctor at.</p>   </div>   <div class="modal-footer" data-dismiss="modal">     <a href="#" class="btn">close</a>     <a href="#" class="btn btn-green">save changes</a>   </div> </div> <%-- end of modal dialog box --%> 

the code simple nothing, nothing happens when clicked, looked @ many examples on net , appear same. have packages.config file , appears include link bootstrap. rest of site regards bootstrap working fine, believe link there. package file looks this:

<?xml version="1.0" encoding="utf-8"?> <packages>   <package id="bootstrap" version="3.3.1" targetframework="net45" />   <package id="jquery" version="2.1.3" targetframework="net35" /> </packages> 

i'm guessing must missing link somewhere, unless error code, 1 suggestions...

your modal working need remove 'hide' class outer div. in order have right visual aspect need add 2 more wrapper divs after outer 1 having classes 'modal-dialog' , respectively 'modal-content'. please find below adapted code:

<!-- start of modal dialog box --> <div class="modal fade" id="mymodal">     <div class="modal-dialog">         <div class="modal-content">             <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                 <h3>modal header</h3>             </div>             <div class="modal-body">                 <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>                 <p>                     ut nunc libero, sodales venenatis gravida nec, posuere quis ante.                     phasellus lobortis molestie felis, vitae sagittis ipsum vehicula lobortis.                 </p>                 <p>                     quisque lacus mi, gravida vel facilisis ac, malesuada vel augue.                     in ac leo eget tellus aliquet aliquam. nam faucibus urna ac justo fringilla eu                     sollicitudin quam pretium. proin pellentesque adipiscing sapien, non dignissim                     massa porttitor dictum. integer tempor aliquam arcu, eget vehicula ipsum auctor at.                 </p>             </div>             <div class="modal-footer" data-dismiss="modal">                 <a href="#" class="btn">close</a>                 <a href="#" class="btn btn-green">save changes</a>             </div>         </div>     </div> </div> <!-- end of modal dialog box --> 

in order display modal can use:

$('#mymodal').modal(); $('#mymodal').modal('show'); 

please check jsfiddle working demo.


Comments

Popular posts from this blog

c - Bitwise operation with (signed) enum value -

xslt - Unnest parent nodes by child node -

YouTubePlayerFragment cannot be cast to android.support.v4.app.Fragment -