使用JS的Custombox和模式
[英]Custombox and modal using JS
问题描述
I have a modal using custombox that works using a button : 
我有一个使用custombox的模式，可以使用按钮来使用：
<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. 我试图在没有数据的datatables按钮内的jquery中启动此模式。 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. 据我了解，在js中，数据目标已被“目标”所取代，但数据触发未在任何地方触发。 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. 我试图用$（'＃accordion-modal'）。modal（'show'）来启动它，但是我不确定应该把它放在哪里。 If I put it in the beginning it just flashes for a second 如果我把它放在开头，它会闪烁一秒钟
1 个解决方案
解决方案1
0 2016-07-12 09:32:38
Looks like I only needed : 看起来我只需要：
{
text: 'My accordion Button',
className: "btn-sm",
action: function ( e, dt, node, config ) {
$('#accordion-modal').modal('show');
e.preventDefault();
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.