Make modal box without HTML

Asked

Viewed 50 times

0

Good afternoon,

I have this code that generates me a Modal Box, however it is not working:

jQuery(function() {

var modalHtml =
'<div id="open-modal" class="modal-window">' +
'  <div>' +
'    <a href="#" title="Close" class="modal-close">Close</a>' +
'    <h1>Voilà!</h1>' +
'    <div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful. <a href="#" target="_blank">Say hello on Twitter.</a></div>' +
'    </div>' +
'</div>';

  // insert HTML dynamically
  jQuery(".modal-dialog").html(modalHtml);

  // display
  jQuery(".modal-dialog").modal('show');

  // append a new element to the DOM
  jQuery('body').after('<div class="modal-dialog modal"></div>');

});;

What can I change to make it work? I also wanted to refresh the page so that it always runs the code.

javascript jquery

1 answer

1


Hello the insertion sequence of your script this incorrect.

jQuery(function() {

var modalHtml =
'<div id="open-modal" class="modal-window">' +
'  <div>' +
'    <a href="#" title="Close" class="modal-close">Close</a>' +
'    <h1>Voilà!</h1>' +
'    <div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful. <a href="#" target="_blank">Say hello on Twitter.</a></div>' +
'    </div>' +
'</div>';


  // append a new element to the DOM
  jQuery('body').after('<div class="modal-dialog modal"></div>');

  // insert HTML dynamically
  jQuery(".modal-dialog").html(modalHtml);

  // display
  jQuery(".modal-dialog").modal('show');
});
<!-- jQuery --> 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<!-- BS JavaScript --> 
<script type="text/javascript" src="js/bootstrap.js"></script>

<body>
  <p>Hello Word</p>
</body>

  • Hello, thanks for the help but when tested gave this error: jQuery(...). modal is not a Function

  • check if you are calling the files in the correct sequence Ex: <!-- jQuery -->&#xA;<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>&#xA;<!-- BS JavaScript -->&#xA;<script type="text/javascript" src="js/bootstrap.js"></script>

  • Yes everything is correct, but continues to generate this error :/

  • I believe it is something with your jquery. I tested it here and it works

  • It already works :) thanks for the help

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.