使用 JS 的自定义框和模态

Custombox and modal using JS

本文关键字：模态 自定义 JS 使用      更新时间：2023-09-26

>我有一个使用自定义框的模态，它使用按钮工作：

<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>

我正在尝试在 jquery 中启动此模式，在数据表按钮内没有运气。这是我函数中代码的一部分：

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

上面的代码可以打开其他简单的模态，但不能打开这个。我猜这与 

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

包含在按钮中。据我了解，数据目标在 js 中被"目标"取代，但数据切换不会在任何地方触发。如何正确触发它？我试图用$（'#accordion-modal'）.modal（'show'）启动它，但我不确定我应该把它放在哪里。如果我把它放在开头，它只是闪烁一秒钟

看起来我只需要：

  {
                text: 'My accordion Button',
                className: "btn-sm",
                action: function ( e, dt, node, config ) {
$('#accordion-modal').modal('show');
          e.preventDefault();
                }
            }
相关文章：