点击JavaScript确认框确定后如何打开Bootstrap模态框？

Hey there! Let's get this working smoothly. First, I spotted a small typo in your code: you referenced solvednum in the confirm message, but you stored the input value in the xyz variable. Let's fix that first, then add the code to trigger the Bootstrap modal.

Step 1: Ensure Your Bootstrap Modal Exists #

First, you need the Bootstrap modal HTML in your page. Here's a basic, customizable example:

<!-- Bootstrap Modal -->
<div class="modal fade" id="saveConfirmationModal" tabindex="-1" aria-labelledby="saveModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="saveModalLabel">Save SIR Number</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        New SIR Number: <span id="sirNumberDisplay"></span><br>
        Are you sure you want to save this entry?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="saveSirBtn">Save</button>
      </div>
    </div>
  </div>
</div>

Step 2: Update Your JavaScript Function #

Modify your generatexy() function to trigger the modal after the user clicks "OK" in the confirm box. The code varies slightly based on your Bootstrap version:

For Bootstrap 5 (no jQuery required):

function generatexy(){
  var xyz = document.getElementById('solvednum').value;
  // Fix the variable reference in the confirm message
  if(confirm('New SIR Number: '+ xyz +' has been generated. Do you want to save?')){
    // Populate the modal with the generated SIR number (optional but helpful)
    document.getElementById('sirNumberDisplay').textContent = xyz;
    // Trigger the modal to open
    const modal = new bootstrap.Modal(document.getElementById('saveConfirmationModal'));
    modal.show();
    return true;
  }else{
    window.location = "<?php echo base_url(); ?>controller/method";
    return false;
  }
}

For Bootstrap 4 (using jQuery):

If you're still on Bootstrap 4, use the jQuery modal trigger method:

function generatexy(){
  var xyz = document.getElementById('solvednum').value;
  if(confirm('New SIR Number: '+ xyz +' has been generated. Do you want to save?')){
    // Populate modal with SIR number
    $('#sirNumberDisplay').text(xyz);
    // Open the modal
    $('#saveConfirmationModal').modal('show');
    return true;
  }else{
    window.location = "<?php echo base_url(); ?>controller/method";
    return false;
  }
}

Quick Tips: #

• Don't forget to include Bootstrap's CSS and JS files (plus jQuery if using Bootstrap 4) in your page.
• If you need to handle the actual save action when the modal's "Save" button is clicked, add an event listener to #saveSirBtn to run your save logic.
• Double-check that the modal ID in your HTML matches the ID you're targeting in JavaScript.

内容的提问来源于stack exchange，提问作者M N