Honestly I have dig deep here and seen something similar to what am looking for, but none of them seems to work for me. I know am missing it somewhere, somehow.

My challenge is that I have a button link on clicking performs a validation check and if the no error is found, i want to trigger a modal window.

below are my code sample

Preview

onclicking the button the javascript function runs very well, but i have not been able to get the modal to load when error < 1. Please help

<script>
function validate_radiobutton_group(form){
  var error = 0;
  if(error>0){
    alert("........");
    return false;
  }
  else{
    $('#myModal').modal({
    show: true
  });
}
}

</script>



<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" id="myModal" style="width: 640px;">
  <div class="modal-header">
    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
    <h3 id="myModalLabel"></h3>
  </div>
  <div class="modal-body">
</div>
  <div class="modal-footer">
    <button data-dismiss="modal" class="btn btn-primary">Close</button>
  </div>
</div><!--#myModal-->

Honestly I have dig deep here and seen something similar to what am looking for, but none of them seems to work for me. I know am missing it somewhere, somehow.

My challenge is that I have a button link on clicking performs a validation check and if the no error is found, i want to trigger a modal window.

below are my code sample

Preview

onclicking the button the javascript function runs very well, but i have not been able to get the modal to load when error < 1. Please help

<script>
function validate_radiobutton_group(form){
  var error = 0;
  if(error>0){
    alert("........");
    return false;
  }
  else{
    $('#myModal').modal({
    show: true
  });
}
}

</script>



<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" id="myModal" style="width: 640px;">
  <div class="modal-header">
    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
    <h3 id="myModalLabel"></h3>
  </div>
  <div class="modal-body">
</div>
  <div class="modal-footer">
    <button data-dismiss="modal" class="btn btn-primary">Close</button>
  </div>
</div><!--#myModal-->

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Mar 23, 2014 at 20:44 lando 44022 silver badges1313 bronze badges asked Mar 23, 2014 at 17:35 GiftoGifto 2111 gold badge22 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

According to the documentation, to show the modal you call:

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

instead of:

$('#myModal').modal({
   show: true
});

Check the markup for your modal

I created a plunker with modal markup from bootstraps docs and it works as expected. http://plnkr.co/edit/vyCL7WqQ014X6wJ8AUjw?p=preview