Bootstrap Modal dialog not displaying

Question

I am trying to make it so when a user clicks on a button, a modal dialog opens and another site is loaded within that dialog.. I have used some tutorials and still cant seem to get it working correctly.. currently when i click the button, the screen just goes slightly grey but no dialog appears.. can anyone see where im going wrong?

<a href="www.google.co.uk" class="btn bootpopup" title="This is title" target="popupModal2">Visit site</a>

<div id="popupModal2" class="modal hide fade" tabindex="-1" role="dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Add new Item</h3>
    </div>
    <div class="modal-body">
      <iframe src="" style="zoom:0.60" frameborder="0" height="250" width="99.6%"></iframe>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">OK</button>
    </div>

javascript

        $('.bootpopup').click(function(){
    var frametarget = $(this).attr('href');
  var targetmodal = $(this).attr('target');
  if (targetmodal == undefined) {
    targetmodal = '#popupModal';
  } else { 
    targetmodal = '#'+targetmodal;
  }
  if ($(this).attr('title') != undefined) {
    $(targetmodal+ ' .modal-header h3').html($(this).attr('title'));
    $(targetmodal+' .modal-header').show();
  } else {
     $(targetmodal+' .modal-header h3').html('');
    $(targetmodal+' .modal-header').hide();
  }  
    $(targetmodal).on('show', function () {
        $('iframe').attr("src", frametarget );   
    });
    $(targetmodal).modal({show:true});
  return false;

});

score 0 · Answer 1 · edited May 23 '17 at 10:30

I found below java script code(cross domain loading code) from this link. In this link go and review the answer given by Manoz. And for creating bootstrap modal dynamically go to this link. Bootstrap modal link will help you to create each and every modal dynamically rather then creating them manually everytime.

function openSite() {
  BootstrapDialog.show({
    title: 'Level 2 Title',
    message: $('<div id="loadCrossoriginHere"></div>'),
    onshown: function() {
      $.ajaxSetup({
        scriptCharset: "utf-8", //maybe "ISO-8859-1"
        contentType: "application/json; charset=utf-8"
      });

      $.getJSON('http://whateverorigin.org/get?url=' +
        encodeURIComponent('http://google.co.uk') + '&callback=?',
        function(data) {
          $("#loadCrossoriginHere").html(data.contents);
        });
    }
  });
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/css/bootstrap-dialog.min.css" rel="stylesheet">


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/js/bootstrap-dialog.min.js"></script>



<button type="button" class="btn btn-primary" onclick="openSite()">Visit Site</button>

Bootstrap Modal dialog not displaying

1 Answers1