Question

我正在创建一个门户网站，并尝试创建一个模态，当模态打开时，我需要调用一个服务。但是模态不是开放的，有时候它会两次开火显示事件

https://jsfiddle.net/tiwariliferocks/gcoxuf6c/

  $(document).ready(function() {
    ConsultarEmpleador.initialise();
});

var ConsultarEmpleador = (function() {
    var init = function() {
        ConsultarDeuda.initialise();
        ConsultarDemanda.initialise();
    }
    return {
        initialise: init
    }
})();


var ConsultarDeuda = (function() {
    var ConsultaDeudaGrid, gridConsultaDeuda;

    var detalleAfiliadoDeuda = function(e) {
        e.preventDefault();
        e.stopPropagation();
        alert("hii");
        var popup = PRIMAUtil.popup({ backdrop: 'static', keyboard: false }, '#detallePorAfiliadoDeuda');

    };

    var init = function() {

        $("#open").on("click", detalleAfiliadoDeuda);
        $("#detallePorAfiliadoDeuda").on('show.bs.modal', function() {
            console.log("open");
            $(this).off('shown.bs.modal');
        });
        $("#detallePorAfiliadoDeuda").on('hide.bs.modal', function() {
            console.log("close");
        });
    }

    return {
        initialise: init,
        verEmpleadorDeuda: verEmpleadorDeuda
    }
})();

var ConsultarDemanda = (function() {

    var init = function() {};
    var verEmpleador = function() {};

    return {
        initialise: init,
        verEmpleador: verEmpleador
    }
})();
var PRIMAUtil ={};
PRIMAUtil.popup = function(container, config) {
      container = container.jquery ? container : $(container);

      var cfg = {
        backdrop:'static',
        keyboard: false
      };



      $.extend(cfg, config);
      container.modal(cfg);     

      var dialog = container.modal('show');
      return dialog;
    };

Answer 1

由于您的代码中存在错误，因此无效。 verEmpleadorDeuda: verEmpleadorDeuda未定义在第41行，ConsultarDeuda内，并且您使用错误的参数命令调用PRIMAUtil.popup()，应该是 PRIMAUtil.popup(container, config)您有PRIMAUtil.popup(config, container)

我刚刚解决了这些问题。

$(document).ready(function() {
    ConsultarEmpleador.initialise();
});

var ConsultarEmpleador = (function() {
    var init = function() {
        ConsultarDeuda.initialise();
        ConsultarDemanda.initialise();
    }
    return {
        initialise: init
    }
})();


var ConsultarDeuda = (function() {
    var ConsultaDeudaGrid, gridConsultaDeuda;

    var detalleAfiliadoDeuda = function(e) {
        e.preventDefault();
        e.stopPropagation();
        alert("hii");
       var popup = PRIMAUtil.popup('#detallePorAfiliadoDeuda',{ backdrop: 'static', keyboard: false });

    };

    var init = function() {
       
        $("#open").on("click", detalleAfiliadoDeuda);
        $("#detallePorAfiliadoDeuda").on('show.bs.modal', function() {
            console.log("open");
            $(this).off('shown.bs.modal');
        });
        $("#detallePorAfiliadoDeuda").on('hide.bs.modal', function() {
            console.log("close");
        });
    }
    return {
        initialise: init,
    }
})();

var ConsultarDemanda = (function() {

    var init = function() {};
    var verEmpleador = function() {};

    return {
        initialise: init,
        verEmpleador: verEmpleador
    }
})();
var PRIMAUtil ={};
PRIMAUtil.popup = function(container, config) {
      container = container.jquery ? container : $(container);

      var cfg = {
        backdrop:'static',
        keyboard: false
      };  
      
      $.extend(cfg, config);
      container.modal(cfg);     
     
      var dialog = container.modal('show');
      console.log(dialog);
      return dialog;
    };

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Modal</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />	
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="detallePorAfiliadoDeuda" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>This is a large modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<button id="open" class="btn btn-sm btn-grey "> OPEN </button>	
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Answer 2

问题在于您PRIMAUtil.popup()的初始化。

看起来应该是这样的：

var popup = PRIMAUtil.popup('#detallePorAfiliadoDeuda', {
  backdrop: 'static',
  keyboard: false
});

Bootstrap模态触发事件显示两次

2 个答案:

JSFIDDLE