CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapbootstrap-modal
Benjamin Oats
Benjamin Oats

Reputation: 573

pop up and populate Bootstrap modal with content on condition

I Have Bootstrap CDN's called in and I am trying to populate the model with content and to get it to active on a condition that a string matches the string printed on the page.

I can get it working with a alert box, just cant get it working with Bootstrap Modal, can anyone see why ?

My Code

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<!--End Modal-->

<!--BODY CONTENT-->
<div class="columns">
    <div class="column-left">
        <div id="question-number" class="question-text">Question 2 of 40</div>
        <div id="question-time" class="question-time"></div>
    </div>
</div>
<!--END BODY CONTENT-->

<!--SCRIPT TO POP OPEN MODEL-->
<script>
    function populateModal() {
        var str = $('#question-number').html();
        if (str.indexOf("Question 2 of 40") !== -1) {
            var body = $('.modal-body').find('.col-md-8')
            $('.modal-title').html("title here");
            $(body).html("content here");
            document.getElementById("modal-button").click();
        }
    }
</script>
<!--END SCRIPT-->

UPDATE

I have linked the function to a button 

 <button class="button next m2" id="next-button" onclick="populateModal()">
                Next
            </button>

but now I am getting this error

Uncaught ReferenceError: populateModal is not defined at HTMLButtonElement.onclick (index.html:76)

Upvotes: 0

Views: 2772

Answers (2)

ImBhavin95
ImBhavin95

Reputation: 1527

Change This

// Edit this instead of document.getElementById("modal-button").click();
$("#myModal").modal('show');


  function populateModal() {
   var str = $('#question-number').html();
   if (str.indexOf("Question 2 of 40") !== -1) {
     var body = $('.modal-body').find('.col-md-8')
     $('.modal-title').html("title here");
     $(body).html("content here");
     $("#myModal").modal();
   }
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!--End Modal-->

<!--BODY CONTENT-->
<div class="columns">
  <div class="column-left">
    <div id="question-number" class="question-text">Question 2 of 40</div>
    <div id="question-time" class="question-time"></div>
  </div>
</div>
<button class="button next m2" id="next-button" onclick="populateModal()">
                Next
            </button>

Upvotes: 0

Arshmeet
Arshmeet

Reputation: 326

There are a few issues 1. You dont call modal like document.getElementById("modal-button").click(); You need to write $("#myModal").modal(); 2. You dont have have document reday function so your var str is undefined since DOM is not loaded

I have fixed these issues in the below code. Check it is working fine now.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!--End Modal-->

<!--BODY CONTENT-->
<div class="columns">
  <div class="column-left">
    <div id="question-number" class="question-text">Question 2 of 40</div>
    <div id="question-time" class="question-time"></div>
  </div>
</div>
<!--END BODY CONTENT-->
$(document).ready(function(){
  function populateModal() {
   var str = $('#question-number').html();
   if (str.indexOf("Question 2 of 40") !== -1) {
     var body = $('.modal-body').find('.col-md-8')
     $('.modal-title').html("title here");
     $(body).html("content here");
     $("#myModal").modal();
   }
 }
  populateModal();
});

Upvotes: 1

Related Questions