在引导程序中单击关闭时隐藏模式

Hiding a modal on clicking off in bootstrap

本文关键字：隐藏 模式 引导程序 单击      更新时间：2023-09-26

我有一个打开和关闭连接的按钮。当按钮处于打开状态并且用户单击它时。为了关闭它，会弹出一个模式并要求确认。但是当按钮处于关闭状态时，不应弹出任何模式。问题是它与切换为显示"开"和"关"的按钮相同，并且附加了一个模态元素。即使单击关闭按钮，也会弹出我不想要的模式。请帮帮我。

if(status == 'On'){                      
      var url = "/streams/status";
      $('button[id="modal-'+ streamId + '"]').click(function(){
        console.log("close modal function")
        $('myModal-'+ streamId).modal('hide');
        $.ajax({
         type: "POST",
         url: url,
         data: "streamId="+streamId,
         success: function(res){
          $('button[id="profile-'+ res.streamId + '"]').toggleClass('btn-success btn-danger');
          $('button[id="profile-'+ res.streamId + '"]').text(function (){
            console.log($(this).text())
            return 'Off';
            }); 
         },
         error: function (res){
          console.log('there was an error', res);
         }
      });
    })
  }
  else{
    console.log("button is off currently"); 
    $('myModal-' + streamId).modal('hide');
    var url = "/streams/status";
    $.ajax({
     type: "POST",
     url: url,
     data: "streamId="+streamId,
     success: function(res){
      $('button[id="profile-'+ res.streamId + '"]').toggleClass('btn-success btn-danger');
      $('button[id="profile-'+ res.streamId + '"]').text(function (){
        console.log($(this).text())
        return 'On';
        }); 
     },
     error: function (res){
      console.log('there was an error', res);
     }
   });
  }
  })

我认为您应该添加一个 rel 属性（关闭或打开），检测 onClick 事件并检查此属性： 

$('#myModal-' + streamId).click(function(event){
  if($('#myModal-' + streamId).attr('rel') == 'on'){
    //do ajax request ON here
    //on success ajax, replace return 'off' by 
    $('#myModal-' + streamId).attr('rel', 'off');
  }
  else{
    //do ajax request OFF here
    //on success ajax, replace return 'on' by 
    $('#myModal-' + streamId).attr('rel', 'on');
  }
}

它应该是有效的

这是正确的方法：

    script.
      function toggleStatus (streamId, statusBefore){
    $.ajax({
    type: "POST",
    url:  "/streams/status",
    data: "streamId="+streamId,
    success: function(res){
      $('button[id="profile-'+ res.streamId + '"]')
        .toggleClass('btn-success btn-danger')
        .attr('data-toggle', statusBefore == true ? "": 'modal');
      $('#profile-glyphicon-'+ res.streamId).toggleClass('glyphicon-ok glyphicon-remove');
    },
    error: function (res){
      console.log('there was an error', res);
    }
  });
}
$('button[id^="modal-"]').click(function(){
  var streamId = this.id.split('-')[1];
  toggleStatus(streamId, true);
  $('myModal-'+streamId).modal('hide');
})
$('button[id^="profile-"]').on("click", function(e){
  var streamId = this.id.split('-')[1];
  var statusBefore;
  var dataToggleStatus = $('#profile-' + streamId).attr("data-toggle");
  if(dataToggleStatus=='modal'){
    statusBefore = true;
    e.preventDefault();
  } else  {
    statusBefore = false;
    toggleStatus(streamId, statusBefore);
  }
})
相关文章：