Bootstrap modal 可在 Firefox 中使用，但不能在 Chrome 中使用

Posted 2023-03-21

【中文标题】Bootstrap modal 可在 Firefox 中使用，但不能在 Chrome 中使用

【英文标题】：Bootstrap modal working with Firefox but not in Chrome

【发布时间】：2021-12-28 12:57:07

【问题描述】：

这是我的代码，它在按下一个按钮后关闭一个模式，然后立即打开另一个并执行解析功能：

$('#BtnUpCsv').on('click', function (e) 
      $('#csvModal').modal('hide');
      $('#pBarModal').modal('show');
      Papa.parse(document.getElementById('csvinput').files[0], ...

在 Firefox 中，它按预期工作，但在 Chrome 中，第一个模态不会在调用函数后立即关闭，并且解析开始，因为它比前两个函数具有一些奇怪的优先级。解析结束后，csvModal 关闭，pBarModal 出现。 我已经尝试添加setTimeout，但它与解析功能混淆。

知道为什么会这样吗？

编辑：整个函数

Papa.parse(document.getElementById('csvinput').files[0], 
        header: true,
        skipEmptyLines: true,
        complete: function(results) 
          pBarMax = results.data.length - 1;
          results.data.forEach(function (data) 
            const csvPcode = data.pcode;
            const csvAntiOx = data.AntiOx;
            const csvCalories = data.Calories;
            const csvCarbs = data.Carbs;
            const csvFats = data.Fats;
            const csvFibers = data.Fibers;
            const csvLipides = data.Lipides;
            const csvProteins = data.Proteins;
            const csvSat_fats = data.Sat_fats;
            const csvSodium = data.Sodium;
            const csvSugars = data.Sugars;

            //Update progress bar
            pBarPerc = ((iPbar/PbarMax) * 100).toFixed();
            $('#progressBar').text(+ pBarPerc + '%');
            $('#progressBar').attr('style','width:' + pBarPerc + '%');
            //console.log(pBarPerc);

            //Rpc requests
            $.ajax(
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: 
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'AntiOx',
                value: csvAntiOx
              ,
              dataType: 'json'
             );

            $.ajax(
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: 
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Calories',
                value: csvCalories
              ,
              dataType: 'json'
             );

            $.ajax(
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: 
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Carbs',
                value: csvCarbs
              ,
              dataType: 'json'
             );

            $.ajax(
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: 
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Fats',
                value: csvFats
              ,
              dataType: 'json'
             );

            $.ajax(
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: 
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Fibers',
                value: csvFibers
              ,
              dataType: 'json'
             );

            $.ajax(
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: 
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Lipides',
                value: csvLipides
              ,
              dataType: 'json'
             );

            $.ajax(
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: 
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Proteins',
                value: csvProteins
              ,
              dataType: 'json'
             );

            $.ajax(
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: 
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Sat_fats',
                value: csvSat_fats
              ,
              dataType: 'json'
             );

            $.ajax(
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: 
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Sodium',
                value: csvSodium
              ,
              dataType: 'json'
             );

            $.ajax(
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: 
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Sugars',
                value: csvSugars
              ,
              dataType: 'json'
             );
            iPbar++;
           );
          //Reset progress bar on completition and modal when hidden
          let PbarResult = $('#pBarModalLabel').text('Completed, ' + results.data.length + ' records updated');
          pBarMax = 0;
          pBarPerc = 0;
          $('#tbl-pcodes').DataTable().ajax.reload();
          setTimeout(function() $('#pBarModal').modal('hide');, 2000);
          setTimeout(function() $('#pBarModalLabel').text('Processing... please wait');, 2500);
        
       );
     );

【问题讨论】：

我们需要查看更多代码才能理解问题。解析函数中是否有需要显示模态的内容？

@Conman_123 不，模式已隐藏，但输入文件仍然存在并且可以通过函数获取。经过一些修改，我能够为解析器设置超时，第一个模式现在关闭，第二个出现。进度条有效，但在解析结束之前不会更新...

【参考方案1】：

好的，我想我现在明白你的问题了。这是我创建的一个 JSFiddle，用于重新创建问题，并展示解决方案的工作原理： https://jsfiddle.net/rn3y1qgd/7/

您的解析函数似乎比模态隐藏和显示“优先”是因为模态函数是异步的。基本上这意味着当你调用它们时，它不会开始更新 html（隐藏/显示模式），直到所有代码完成运行。这意味着它必须等待您的解析函数完成才能显示/隐藏模式。

解决方法是等待模态显示之前调用解析函数。在小提琴中，这是相关部分：

$("#testbtnSolution").click(function() 
    $("#exampleModal").modal('hide');   
    $("#exampleModal2").one('shown.bs.modal', function() 
      longExecutingFunction(2000);
      alert("processing done");
    ).modal('show');  
);

在这段代码中，我们注册了一个在shown.bs.modal 上运行的事件处理程序。模态显示完成后，它将运行您的处理函数。