Calling Bootstrap Modal from Bootstrap Popover

Question

Goal: I would like to call a bootstrap modal from a bootstrap popover. I was looking at Calling a modal from a Bootstrap popover and tried to implement the code.

Issue: Upon clicking the button that triggers the modal from inside the popover, it will darken the background but no modal appears. Not sure what the issue is exactly. The code I tried from the linked article above gives the same result as if I just set up the button to trigger a modal without the suggest jQuery in that article.. Currently my code is set up to use the advice suggested there, and this is what I have so far...

Thanks in advance to all help.

   $(function () {
      $('[data-toggle="popover"]').popover({
        html: true,
        content: function() {
            return $('#popover-content').html();
        }
      });

        $(document).on('click', "#messageUser", function() {
            console.log('Clicked message button');
            $('#messageUserModal').modal('show');
        });
    });

    /* --Tried this too, thinking the popover and modal were fighting
    $(function() {
        $('#messageUser').click(function() {
            console.log('Clicked message button');
            //$('[data-toggle="popover"]').hide();
            $('#messageUserModal').modal('show');
            //$('#messageUserModal').show();
        });
    });
    */

HTML/PHP/BS

<button class='btn btn-xs btn-primary' type='button' id='messageUser'>Send Message</button>
                </form>

                <div class='modal fade' id='messageUserModal' 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'>Send Message to ".$helperName." </h4>
                      </div>
                      <div class='modal-body'>
                        <textarea class='form-control' name='message' maxlength='749' rows='10' cols='50' placeholder='Enter message to ".$helperName." here..'></textarea><br>
                      </div>
                      <div class='modal-footer'>
                        <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
                        <button type='button' class='btn btn-primary'>Send Message</button>
                      </div>
                    </div>
                  </div>
                </div>

Answer 1

I found the answer to the problem.. I thought that I should try to call the modal from outside of the popover (i.e. a button somewhere on the page to press to call that modal, just to see if the problem was isolated to the popover as I had originally concluded..). Once I added the same button elsewhere I got nothing to happen. I then realized that the code for the modal was in the popover so I then took that code put it outside of the popover. When I then clicked on the new button I saw that a modal came up as expected, but then I clicked on the original button that I was trying to call the modal with and it then also triggered the modal.. so that told me that when the popover is fired it must be executing the modal but never showing it or something to that extent.. so I will remove the code for the modal outside of the popover code and it will work just fine. Long winded answer but hopefully the journey to get to the answer will help someone else as well.

Also, important to note, if using bootstrap 3 you do not need to write any fancy jquery code to show the modal, or whatever the suggestion was from the article I referenced at the beginning of the post..