0

I wrote a plugin based on the w3schools modal box.
https://www.w3schools.com/bootstrap/bootstrap_modal.asp

However, when I submitted the plugin to the wordpress directory, they said I needed to upgrade to the latest versions. When I do that, the modal features and javascript functionality do not work anymore. I even tried it in the w3school, test site, with the same problem.

Does anyone have a solution for a modal dialog box that works with the latest jquery, bootstrap and dialog boxes?

Here is what I changed:

This was the default from w3schools

<title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>


but when I change it to the latest, it stops working

<title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</head>

Code for the modal can be seen on the w3school.com site, but here it is as well:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

What am I missing?

6
  • 1
    You should be using the version of jQuery that comes with WordPress, doing otherwise will cause plugin compatibility issues. This will get flagged by the reviewers once you've solved the problem you asked about. Instead of updating jQuery, remove it and enqueue the copy that comes with WordPress instead
    – Tom J Nowell
    Jan 18 at 3:11
  • 1
    Also using the CDN is recommended because it shares caches, but that's an old strategy for that does not work on browsers built in the last 10 years. Instead it will slow down and introduces privacy issues. Bundle the relevant bootstrap file and enqueue the jQuery that comes with WP instead
    – Tom J Nowell
    Jan 18 at 3:12
  • the problem with using the jquery that comes with wordpress is that the javascript functions no longer work as in the example. I already tried that theory Jan 18 at 5:03
  • Also the reason, I NEVER EVER use links to CDN, is that you have any issue with the net and/or they change the content, your entire site is screwed. Been bitten too many times. It is a nice theory, but linking to another site just slows your own site based on someone else site demand. Just an all-round bad idea. Jan 18 at 5:05
  • I'm not suggesting you use CDN links, I'm telling you not to, the ajax.googleapis.com and maxcdn.bootstrapcdn.com script/styles in your code are CDNs. Otherwise if the JS does not work you need to ask on stackoverflow and provide the error messages from the console.. What's likely happened is that you upgraded Bootstrap to a major new version and made no changes to the javascript. Generic JS/HTML questions are offtopic here
    – Tom J Nowell
    Jan 18 at 10:45

1 Answer 1

0

When you look at the bootstrap documentation for the version you want to use, you will find that the markup of the modal has slightly changed. (https://getbootstrap.com/docs/5.1/components/modal/) The data attributes have now an added -bs- in them.

1
  • Interesting. Let me check that out. THANK YOU! Jan 21 at 23:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.