Question

I have a modal using custombox that works using a button :

<html>
    <head>
        <link href="assets/plugins/custombox/dist/custombox.min.css" rel="stylesheet">
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/core.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/components.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/pages.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/menu.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/responsive.css" rel="stylesheet" type="text/css" />
        <script src="assets/js/modernizr.min.js"></script>
    </head>
    <body>
                            <div id="accordion-modal" class="modal fade">
                                <div class="modal-dialog">
                                    <div class="modal-content p-0">
                                        <div class="panel-group panel-group-joined" id="accordion-test">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title">
                                                        <a data-toggle="collapse" data-parent="#accordion-test" href="#collapseOne" class="collapsed">
                                                            Collapsible Group Item #1
                                                        </a>
                                                    </h4>
                                                </div>
                                                <div id="collapseOne" class="panel-collapse collapse">
                                                    <div class="panel-body">
                                                        test
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
  <button  data-toggle="modal" data-target="#accordion-modal">Accordion in Modal</button>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>

        <!-- Modal-Effect -->
        <script src="assets/plugins/custombox/dist/custombox.min.js"></script>
        <script src="assets/plugins/custombox/dist/legacy.min.js"></script>

        <!-- App js -->
        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

    </body>
</html>

I am trying to initiate this modal inside jquery, inside a datatables button with no luck. This is the part of the code in my function :

    buttons: [
      {
            text: 'My accordion Button',
            className: "btn-sm",
            action: function ( e, dt, node, config ) {
              Custombox.open({
                target: '#accordion-modal',
                effect: 'fadein'
     });
      e.preventDefault();
            }
        }
    ]

The code above works to open other simple modals but not this one. This has to do I guess with the

data-toggle="modal" data-target="#accordion-modal"

that is contained in the button. From what I understand the data-target is replaced by "target" in js, but the data-toggle is not triggered anywhere. How do I trigger it properly? I attempted to initiate it with $('#accordion-modal').modal('show') but I am not sure where exactly I should put this. If I put it in the beginning it just flashes for a second

Answer 1

看起来我只需要：

  {
                text: 'My accordion Button',
                className: "btn-sm",
                action: function ( e, dt, node, config ) {
$('#accordion-modal').modal('show');

          e.preventDefault();
                }
            }

Custombox and modal using JS

1 个答案: