Bootstrap jQuery无法获得背景和键盘工作

我试图禁用背景一旦弹出窗口打开。我在这里和其他地方尝试了很多东西。其他一切都没有问题。

// HAVE TRIED ALL OF THESE NONE WORK
//
//      $(this).modal({
//          backdrop: 'static',
//          keyboard: false,
//          show: false
//      });
//
//
//      $('#modal-overlay').data('modal').options.backdrop = 'static';
//
//      $('[data-toggle="modal"]').each(function () {
//          $(this).attr('data-backdrop','static');
//          $(this).attr('data-keyboard','false');
//      });
//
//      $('#modal-overlay').on('.open-modal', function() {
//          $(this).modal('#modal-overlay').options.backdrop = 'static';// For outside click of modal.
//          $(this).modal('#modal-overlay').options.keyboard = false;// For ESC button.
//      });
//
//
//      $("#modal-overlay").data('bs.modal')._config.backdrop = 'static'; 
//      $('#modal-overlay').modal(visible: true);
//      $('#modal-overlay').modal({backdrop: 'static', keyboard: false}, 'show');
//
//      $("#modal-overlay").modal({
//          backdrop: 'static',
//          keyboard: false
//      });
//
//      var modal = $('#modal-overlay');
//      var keyboard = false; // Prevent to close by ESC
//      var backdrop = 'static'; // Prevent to close on click outside the modal
//      $('#modal-overlay').modal(keyboard);
//      $('#modal-overlay').modal(backdrop);
//

我还尝试了href链接，data-backdrop="static"，data-keyboard="false"。
我希望用户无法通过点击弹出窗口或点击ESC关闭弹出窗口
这应重现问题。点击任何链接，它会打开一个弹出窗口，只要你点击背景页面上的任何地方，它就会关闭。

$(document).ready(function() {
  var itemId; // Variable to store the current item ID
  // Open the edit modal
  $(document).on('click', '.open-modal', function() {

    itemId = $(this).data('item-id'); // Get the ID from the clicked element
    $('#submit-data').data('item-id', itemId); // Store the ID in the submit button's data
    var title = $(this).data('title');
    $("#title-label").html(title);

    // Fetch the current data for the item and set it in the input field
    $.ajax({
      type: 'POST',
      url: 'get_data.php', // PHP script to fetch data
      data: {
        id: itemId
      },
      dataType: "json",
      success: function(response) {
        $('#name-field').val(response.name);
        $('#status-field').val(response.status);
        $('#period-field').val(response.period);
        $('#notify-field').val(response.notify);
        $('.modal-overlay').show();
      }
    });
  });


  // Event delegation for opening delete modal
  $(document).on('click', '.open-delete-modal', function() {
    itemId = $(this).data('item-id'); // Get the ID from the clicked element
    $('.delete-modal-overlay').show();
  });

  // Event for opening add new record modal
  $('#add-new-record').click(function() {
    var title = $(this).data('title');
    $("#title-label").html(title);
    $('#submit-data').data('item-id', ''); // No need to prepopulate the ID
    $('#name-field').val('');
    $('#status-field').val('');
    $('#period-field').val('');
    $('#notify-field').val('');
    $('.modal-overlay').show();
  });


  // Close modal dialogs
  $('.modal-overlay, .delete-modal-overlay, #close-modal, #cancel-delete').on('click', function(event) {
    if (event.target === this || event.target.id === 'close-modal' || event.target.id === 'cancel-delete') {
      $(this).hide();
    }
  });

  // Submit data to the server using AJAX
  $('#submit-data').click(function() {
    var nameData = $('#name-field').val();
    var statusData = $('#status-field').val();
    var periodData = $('#period-field').val();
    var notifyData = $('#notify-field').val();

    if (nameData == '') {
      $('#name-field').css("background-color", "red");
      exit();
    }
    if (statusData == '') {
      $('#status-field').css("background-color", "red");
      exit();
    }
    if (periodData == '') {
      $('#period-field').css("background-color", "red");
      exit();
    }
    if (notifyData == '') {
      $('#notify-field').css("background-color", "red");
      exit();
    }
    var url = itemId ? 'update.php' : 'add.php'; // Use different URL for add and update

    $.ajax({
      type: 'POST',
      url: url,
      data: {
        id: itemId,
        name: nameData,
        status: statusData,
        period: periodData,
        notify: notifyData
      },
      success: function(response) {
        $('.modal-overlay').hide();
        location.reload(); // Refresh the originating web page
      }
    });
  });

  // Confirm Delete
  $('#confirm-delete').click(function() {
    $.ajax({
      type: 'POST',
      url: 'delete.php',
      data: {
        id: itemId
      }, // Pass the ID & section for deletion
      success: function(response) {
        $('.delete-modal-overlay').hide();
        location.reload(); // Refresh the originating web page
      }
    });
  });
});

body {
  background-color: #2A333B;
  font-family: Arial, Helvetica, sans-serif;
}

#list {
  padding: 10px;
  clear: both;
  color: white;
}

#list table {
  border-spacing: 0;
  border-collapse: collapse;
  font-family: Arial;
  font-weight: normal;
  font-size: 13px;
  font-style: normal;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

#list tr th {
  background: #3E474E;
  ;
  padding-right: 4px;
  padding-left: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-style: bold;
  color: #A0A8A8;
  border-bottom: 1px solid #999999;
}

#list tr td {
  background: #566453;
  padding-right: 4px;
  padding-left: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-style: bold;
  color: white;
  border-bottom: 1px solid #999999;
}

#list a {
  text-decoration: none;
  color: #9fb7d9;
}

#list tr:hover {
  background: #4C5154;
  padding-right: 4px;
  padding-left: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-style: bold;
  color: white;
  border-bottom: 1px solid #999999;
}

#list tr:hover td {
  background: #4C5154;
  padding-right: 4px;
  padding-left: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-style: bold;
  color: white;
  border-bottom: 1px solid #999999;
}

.modal-overlay,
.delete-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 15px;
  border-style: solid;
  border-width: 1px;
  border-color: #999999;
  border-radius: 5px;
}

.modal-content,
.delete-modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #2A333B;
  color: #A0A8A8;
  padding: 15px;
  border-style: solid;
  border-width: 1px;
  border-color: #999999;
  border-radius: 5px;
}

.button {
  background-color: transparent;
  padding: 0;
  border: none;
  background: none;
}
.parentDisable{
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.8;
  z-index: 998;
  height: 100%;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.min.js"></script>

<div id="list">
  <table border="0">
    <tr>
      <th align="left" colspan="5">
        <h1>Data List</h1>
      </th>
      <th align="center" colspan="2">
        <a href="#" class="open-modal" id="add-new-record" data-title="Add">Add</a>
      </th>
    </tr>
    <tr>
      <th align="left">id</th>
      <th align="left">name</th>
      <th align="left">status</th>
      <th align="left">period</th>
      <th align="left">notify</th>
      <th align="left" colspan="2">&nbsp;</th>
    </tr>

    <tr>
      <td align="left" width="30">1</td>
      <td align="left">name1</td>
      <td align="left">statusname1</td>
      <td align="left">periodname1</td>
      <td align="left">notify1</td>
      <td align="center" width="30">
        <a href="#" class="open-modal" id="open-modal" data-item-id="1"></a>
      </td>
      <td align="center" width="30">
        <a href="#" class="open-delete-modal" id="open-delete-modal" data-item-id="1">Delete</a>
      </td>
    </tr>
    <tr>
      <td align="left" width="30">2</td>
      <td align="left">name2</td>
      <td align="left">statusname2</td>
      <td align="left">periodname2</td>
      <td align="left">notify2</td>
      <td align="center" width="30">
        <a href="#" class="open-modal" id="open-modal" data-item-id="2"></a>
      </td>
      <td align="center" width="30">
        <a href="#" class="open-delete-modal" id="open-delete-modal" data-item-id="2">Delete</a>
      </td>
    </tr>
    <tr>
      <td align="left" width="30">3</td>
      <td align="left">name3</td>
      <td align="left">statusname3</td>
      <td align="left">periodname3</td>
      <td align="left">notify3</td>
      <td align="center" width="30">
        <a href="#" class="open-modal" id="open-modal" data-item-id="3"></a>
      </td>
      <td align="center" width="30">
        <a href="#" class="open-delete-modal" id="open-delete-modal" data-item-id="3">Delete</a>
      </td>
    </tr>
    <tr>
      <td align="left" width="30">4</td>
      <td align="left">name4</td>
      <td align="left">statusname4</td>
      <td align="left">periodname4</td>
      <td align="left">notify4</td>
      <td align="center" width="30">
        <a href="#" class="open-modal" id="open-modal" data-item-id="4"></a>
      </td>
      <td align="center" width="30">
        <a href="#" class="open-delete-modal" id="open-delete-modal" data-item-id="4">Delete</a>
      </td>
    </tr>

  </table>
</div>

<div class="modal-overlay" id="modal-overlay">
<div class="parentDisable"> <!-- add new div here -->
  <div class="modal-content" id="modal-content">
    <table>
      <tr>
        <th colspan="2" align="centre"><span class="modal-title" id="title-label"></th>
            </tr>
            <tr>
                <th align="right">Name</th>
                <td><input type="text" id="name-field" required></td>
            </tr>
            <tr>
                <th align="right">Status</th>
                <td>
                    <select name="status" id="status-field" required>
                        <option value=""></option>
                        <option value="1">Enabled</option>
                        <option value="2">Disabled</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th align="right">Period</th>
                <td>
                    <select name="period" id="period-field" required>
                        <option value=""></option>
                        <option value="Daily">Daily</option>
                        <option value="Weekly">Weekly</option>
                        <option value="Monthly">Monthly</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th align="right">Notify</th>
                <td><input type="number" id="notify-field" required></td>
            </tr>
            <tr>
                <th align="left"><button id="submit-data">Save</button></th>
                <th align="right"><button id="close-modal">Cancel</button></th>
            </tr>
        </table>
</div>
    </div>
</div>

<div class="delete-modal-overlay" id="delete-modal-overlay">
<div class="parentDisable"> <!-- add new div here -->
    <div class="delete-modal-content" id="delete-modal-content">
        <table>
            <tr>
                <th colspan="2">Are you sure you want to delete</th>
            </tr>
            <tr>
                <th align="left"><button id="confirm-delete">Delete</button></th>
                <th align="right"><button id="cancel-delete">Cancel</button></th>
            </tr>
        </table>
    </div>
</div>
</div>

Bootstrap jQuery无法获得背景和键盘工作

1条答案

相关问题

热门标签

最新问答