PHP页面无需按钮直接显示Quadra Alert提示框

To remove the button-triggered logic and show your Quadra Alert automatically when the PHP action page loads, follow these straightforward steps:

1. Retain the Alert HTML #

Your existing alert markup is ready to use—no changes needed unless you want to tweak the content:

<div id="alert1" data-target="#alert1" class="qdr-alert alert bg-primary top left white"> 
  <strong>Well done!</strong> You are using a stronger theme! 
</div>

2. Remove Button Trigger Elements #

Delete any button or trigger element with the qdr-alert-trigger class linked to this alert—we don’t need user interaction to display it anymore.

3. Replace Trigger JS with Page Load Logic #

The original code listened for click events on triggers. Instead, we’ll show the alert as soon as the page DOM is fully loaded. Swap out your existing Quadra Alert script with this:

$(document).ready(function() {
  // Target your alert element
  const alertElement = $('#alert1');
  let autoHideTimer;

  // Clear any existing timers to avoid conflicts
  clearTimeout(autoHideTimer);

  // Show the alert (assuming Quadra Alert uses the 'show' class for visibility)
  alertElement.addClass('show');

  // Auto-hide after 5 seconds (adjust the timeout value to your preference)
  autoHideTimer = setTimeout(() => {
    alertElement.removeClass('show');
  }, 5000);
});

Note: If Quadra Alert uses fadeIn()/fadeOut() instead of adding/removing a show class, adjust the code to match that behavior.

4. Optional: Conditional Display with PHP #

If you only want the alert to appear after a specific action (like a successful form submission), wrap the alert and script in a PHP condition:

<?php 
// Example: Show alert only if the action succeeded
if (isset($_SESSION['action_success']) && $_SESSION['action_success']) {
?>
<div id="alert1" data-target="#alert1" class="qdr-alert alert bg-primary top left white"> 
  <strong>Well done!</strong> You are using a stronger theme! 
</div>

<script>
$(document).ready(function() {
  const alertElement = $('#alert1');
  let autoHideTimer;

  clearTimeout(autoHideTimer);
  alertElement.addClass('show');

  autoHideTimer = setTimeout(() => {
    alertElement.removeClass('show');
  }, 5000);
});
</script>
<?php 
  // Clear the session variable so the alert doesn't persist on refresh
  unset($_SESSION['action_success']);
}
?>

This setup will make your Quadra Alert appear automatically when the PHP action page loads, no button click required.

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