如果使用 jquery 单击按钮，如何激活弹出模式？

Posted 2023-05-07

技术标签:

【中文标题】如果使用 jquery 单击按钮，如何激活弹出模式？【英文标题】：How to activate pop up modal if button is clicked using jquery? 【发布时间】：2021-05-09 08:33:17 【问题描述】：

我创建了一个表，其中我的数据可以是 ACTIVE 或 INACTIVE 并且这已经在工作，我的目标是我只想添加一个函数，当我单击按钮使我的数据变为 INACTIVE 时，它会弹出一个模态并有一条消息。但我不知道如何让它弹出。

我找到了一个类似的post，但它不能应用于我的，因为我所做的有不同的方法，我认为我的方法更容易让我自己理解，如果我尝试的话，我会或可能会使事情复杂化使用链接。提前致谢

这是我的 JQUERY 中的代码

$(document).on('click', '.status_checks', function() 

  var status = '1';
  var selector = $(this);
  var id = $(this).data('id');

  if ($(this).hasClass("btn-success")) 
    status = '0';
  

  $.ajax(
    type: "POST",
    url: "../forms/form_BtnStats.php",
    data: 
      id: id,
      status: status
    ,
    success: function(data) 
      selector.hasClass("btn-success") ? (selector.removeClass("btn-success").addClass(
          "btn-danger"),
        selector.text("Inactive")) : (selector.removeClass("btn-danger").addClass(
          "btn-success"),
        selector.text("Active"));
      // location.reload();
    
  );

);

// For status Active/Inactive
function StatusChange() 


  $("#dataTables").DataTable().destroy();
  $("#tb_body").empty();

  var status = $('#stats').val();

  if (status) 

    $.ajax(
      type: "POST",
      url: "../forms/form_statusForspecs_dtbl.php",
      data: 
        status: status
      ,
      success: function(data) 

        $("#dataTables").append(data);
        $("#dataTables").DataTable();

      
    );
  


// Startup
$(document).ready(function() 
  $('#stats').change(function() 
    $(this).val();
  );

  $("#stats").trigger('change');
);

@import https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <style>
    .statusButton 
        color: white;
        display: inline-block;
        margin-bottom: 0;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 20px;
        white-space: nowrap;
        padding: 2px 12px;
        font-size: 12px;
        line-height: 1.42857143;
        border-radius: 4px;
        user-select: none;
    
    </style>
</head>
<!-- this is the modal that I want to pop up -->
<div class="modal fade" id="reason_for_modal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <center> Confirmation </center>
        </h4>
      </div>

      <!-- Modal body -->
      <div class="modal-body panel-body">
        <center>
          <br><br>
          <p> <strong> Reason for Inactive </strong> </p>
        </center>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <div class="col-sm-15">
          <div class="form-group">
            <button type="submit" id="submitBtn" class="btn btn-danger pull-right" data-toggle="modal" data-target="#maModal" onclick="window.location.href='#'">
                                <span class="fa fa-check"></span>
                                Close
                            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<div id="page-wrapper">
  <div class="row">
    <div class="col-lg-12">
      <br>
      <br>
      <a href="../forms/form_toolspec.php">
        <button class="btn btn-primary pull-right">
                            <span class="fa fa-plus-circle"></span>
                            Add Record
                        </button>
      </a>
      </h1>
    </div>
    <!-- /.col-lg-12 -->
  </div>
  <br>
  <!-- Status -->
  <div>

    <form action="GET">
      <div class="form-group">
        <label> Table group by Status </label>
        <select name="selector_id" onchange="StatusChange()" style="width:200px;" class="show-menu-arrow form-control" id="stats">
          <!-- <option value="" disabled> Select Status </option> -->
          <option value="1" selected> ACTIVE </option>
          <option value="0"> INACTIVE </option>
        </select>
      </div>
    </form>
  </div>

  <!-- /.row -->
  <div class="row">
    <div class="col-lg-12">
      <div class="panel panel-primary">
        <div class="panel-heading">
          Table of Tools Specification
        </div>
        <!-- /.panel-heading -->
        <div class="panel-body" id="showStatus">
          <div class="table-responsive">
            <table  class="table table-striped table-bordered table-hover" id="dataTables">
              <thead>
                <tr>
                  <th> Tools Name </th>
                  <th> Model No. </th>
                  <th> Value </th>
                  <th> Number of days </th>
                  <th>
                    <center> Status </center>
                  </th>
                </tr>
              </thead>
              <tbody id="tb_body">
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这是我在函数 StatusChange() 中的 form_statusForspecs_dtbl.php AJAX 调用

<?php
include ("../include/connect.php");
 
$status = $_POST['status'];
$con->next_result();
$result = mysqli_query($con, "CALL GetToolSpecByStatus('$status')");  
 while ($row = mysqli_fetch_assoc($result)) 
 
   echo '<tr>';
   echo "<td><a href='edit_toolspec.php?ID=".$row['ID']."' style='color:red;'>" . $row['tools_name'] . "</a></td>";  
   echo '<td>'.$row['model_num'].'</td>';  
   echo '<td>'.$row['model_num_val'].'</td>';  
   echo '<td>'.$row['no_of_days'] .'</td>';  ?>

   <td>
    <center>
        <p data-id="<?php echo $row['ID'];?>"
            class="status_checks statusButton <?php echo ($row['status'])? 'btn-success': 'btn-danger'?>">
            <?php echo ($row['status'])? 'Active' : 'Inactive'?>
        </p>
    </center>
</td>
<?php 
   echo '</tr>';
 

 ?>

这是我的form_btnStats.php AJAX调用按钮更改状态并将记录在sql数据库中

<?php 

include('../include/connect.php');

$user_id=$_POST['id'];
$newStatus=$_POST['status'];
$query = "UPDATE tools_spec SET status='$newStatus' WHERE ID = '$user_id'";
$result = mysqli_query($con, $query);
    if($result === TRUE)
    
        echo json_encode(1);
    
    else
    
        echo json_encode(0);
    
?>

【问题讨论】：

您是否尝试过使用 CSS 并只是更改“显示”属性（例如通过添加/删除类）？是的，先生，我确实使用了 CSS 编辑它并插入我的 CSS @jaromir 所以我认为它不起作用？我在您的“StatusChange”函数中看不到任何会改变您的模态状态的东西。喜欢if(status == 0) jQuery('modal-selector').show(); 。它正在工作，这是因为表在里面，我的 ajax，jquery 将负责显示它。我应该再次编辑它并显示我的两个 ajax。 【参考方案1】：

由于您只需要在制作按钮 inactive 时显示弹出窗口，因此您添加代码以在 if(status == '1') 内显示模式并使用 $("#reason_for_modal").modal('show'); 显示相同的。此外，在您的 ajax 调用周围设置一些条件，以便它仅在状态为 1 时执行。接下来，如果用户单击模式内的 deactivate 按钮，您可以为相同创建一个单击事件处理程序并从那里将值传递给 ajax .

演示代码：

var id;
$(document).on('click', '.status_checks', function() 

  var status = '1';
  var selector = $(this);
  id = $(this).data('id');
  if ($(this).hasClass("btn-success")) 
    status = '0'; //change to 0
    $("#reason_for_modal").modal('show'); //show modal
  
  //enter only when status is 1
  if (status == '1') 
    /*$.ajax(
      type: "POST",
      url: "../forms/form_BtnStats.php",
      data: 
        id: id,
        status: status
      ,
      success: function(data) */
    selector.removeClass("btn-danger").addClass(
      "btn-success");
    selector.text("Active");

    /*
  );*/
  
);
//if activate btn is click
$("#submitBtn").on("click", function() 
  var reason = $("#reason").val(); //get reason..
  $("#reason_for_modal").modal('hide'); //hide modal
  console.log(id)
  $("#reason").val("")//empty textarea
  /*$.ajax(
      type: "POST",
      url: "../forms/form_BtnStats.php",
      data: 
        id: id,
        status: 0,
        reason:reason
        
      ,
      success: function(data) */
  //change class and text
  $("p[data-id=" + id + "]").removeClass("btn-success").addClass("btn-danger")
  $("p[data-id=" + id + "]").text("Inactive")
  /*
  );*/

)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- this is the modal that I want to pop up -->


<!-- /.row -->
<div class="row">
  <div class="col-lg-12">
    <div class="panel panel-primary">
      <div class="panel-heading">
        Table of Tools Specification
      </div>
      <!-- /.panel-heading -->
      <div class="panel-body" id="showStatus">
        <div class="table-responsive">
          <table  class="table table-striped table-bordered table-hover" id="dataTables">
            <thead>
              <tr>
                <th> Tools Name </th>
                <th> Model No. </th>
                <th> Value </th>
                <th> Number of days </th>
                <th>
                  <center> Status </center>
                </th>
              </tr>
            </thead>
            <tbody id="tb_body">
              <tr>
                <td><a href="edit_toolspec.php?ID=1" style="color:red;">abc</a></td>
                <td>14</td>
                <td>1</td>
                <td>5</td>

                <td>
                  <center>
                    <p data-id="1" class="status_checks statusButton btn-success">
                      Active
                    </p>
                  </center>
                </td>
              </tr>
              <tr>
                <td><a href="edit_toolspec.php?ID=2" style="color:red;">abc1</a></td>
                <td>14</td>
                <td>11</td>
                <td>51</td>

                <td>
                  <center>
                    <p data-id="2" class="status_checks statusButton btn-danger">
                      Inactive
                    </p>
                  </center>
                </td>
              </tr>
              <tr>
                <td><a href="edit_toolspec.php?ID=3" style="color:red;">ab3</a></td>
                <td>13</td>
                <td>13</td>
                <td>51</td>

                <td>
                  <center>
                    <p data-id="3" class="status_checks statusButton btn-success">
                      Active
                    </p>
                  </center>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="reason_for_modal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <center> Confirmation </center>
      </div>
      <!-- Modal body -->
      <div class="modal-body panel-body">
        <center>
          <br><br>
          <p> <strong> Reason for Inactive </strong> </p>
          <textarea id="reason"></textarea>
        </center>
      </div>
      <!-- Modal footer -->
      <div class="modal-footer">
        <div class="col-sm-15">
          <div class="form-group">
            <button type="button" id="submitBtn" class="btn btn-success pull-right"> De-Activate</button>
            <button type="button" class="btn btn-danger pull-right" data-toggle="modal" data-dismiss="modal">
               <span class="fa fa-check"></span>
               Close
               </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

嗨@Swati 我又有一个问题，我无法将我的原因消息保存到我的ajax。当我尝试更新我的其他文件时，它会发送错误并取消定义其他值嗨，请在事件处理程序中执行console.log(reason)，看看它是否显示正确的值。是的，谢谢，我明白了它的价值。最后一件事是我在我的数据表中创建了一个名为 reason 的列。现在，如果处于非活动状态，则可以查看它，但不应该处于活动状态。我试图隐藏它，但我的代码不起作用我应该怎么做？ :( 检查 this 可能会有所帮助。【参考方案2】：

选项 1：简单的 CSS 类分配

Example: https://www.w3schools.com/w3css/w3css_modal.asp

选项 2：使用 jQuery.show() / jQuery.hide()

function StatusChange() 
   ...
   if (status == 0) 
      // This should use # / id
      jQuery('div.modal').show();

选项 3：使用 jQuery UI 对话框

Example: https://jqueryui.com/dialog/

【讨论】：

以上是关于如果使用 jquery 单击按钮，如何激活弹出模式？的主要内容，如果未能解决你的问题，请参考以下文章

单击 jQuery Mobile 的提交按钮后，如何显示“加载”弹出窗口？

如何在 aspx 按钮单击上弹出模式并使用 gridview 加载数据？

单击复选框并单击恢复按钮时如何打开Jquery对话框弹出窗口

如何在模式内单击按钮时使用 jQuery 或 javascript 获取引导模式的数据值？

从角度 ui 引导模式中单击时如何捕获背景单击事件？

jquery 在单击单选按钮时选择并激活特定类的所有项目