javascript - 从 jquery 中的按钮调用模态对话框表单

Question

我有一个模态对话框，我试图通过 slickgrid 中的按钮进行交互。这是基于 slickgrid 示例 1。这是我的 Fiddle

<div id="states" class="modalDialog">
    <div>   
        <a href="#close" title="Close" class="close">X</a>

        <h2>Modal Box</h2>

        <p>This is a sample modal box that can be created using the powers of CSS3.</p>
        <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
    </div>
</div>

我的网格中有一个 onClick 订阅函数。

grid.onClick.subscribe(function(e,args) {
    if ($(e.target).hasClass('states')) {    

    }
});

监听器可以工作，但我无法让它调用我的模态对话框。我也尝试过从按钮本身调用它。

function reportFormatter(row, cell, value, columnDef, dataContext) {
    return "<button class='states' data-toggle='modalDialog' data-target='#states'>states</button>";
}

Answer 1

你的问题是资源。检查他们和他们的订单。在 jsFiddle 中你缺少 jquery-ui。 我添加到 jquery.event.drag 源下的 html 窗口

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

我改变了对话框，例如

<div id="states" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

并在 js 窗口中的事件中添加 .dialog，如 documentation 中所示

if ($(e.target).hasClass('states')) {    
    $('#states').dialog();
}

现在对话框在单击按钮状态下工作正常。