从jquery中的按钮调用modalDialog

时间:2015-04-23 15:21:17

标签: javascript jquery

我有一个modaldialog我试图通过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')) {    

    }
});

听众可以工作,但我不能让它来调用我的modaldialog。我也试过从按钮本身调用它。

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

1 个答案:

答案 0 :(得分:2)

你的问题是资源。检查他们和他们的订单。在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();
}

和对话框现在可以正常处理点击按钮状态。