将按钮附加到模态

时间:2014-08-07 11:11:53

标签: javascript jquery twitter-bootstrap modal-dialog

我一直试图复制这个demo(#34;现场演示")。我有以下代码:

var node = svg.selectAll(".node")
    .data(nodes)
    .enter().append("g")
    .on("click", function (d) {

        $(".modal-body").empty();
        $(".modal-header").empty();

        $(".modal-header").append("<h4>" + d.name + "</h4>");
        $(".modal-body").append("<p>URL: " + d.relativePath + "</p>");

        for (var key in d.verbDocDict) {
            if (d.verbDocDict.hasOwnProperty(key)) {
                console.log(key + ": " + d.verbDocDict[key])
                 -----> $(".modal-body").append("<p><a>" + key + ": " + d.verbDocDict[key].document + "</a></p>");
                console.log("<p>This <a href=\"#\" role=\"button\" class=\"btn btn-default popover-test\" title=\"A Title\" data-content=\"And here's some amazing content. It's very engaging. right?\">button</a> should trigger a popover on click.</p>")
                //$(".modal-mody").append("<p>This <a href=\"#\" role=\"button\" class=\"btn btn-default popover-test\" title=\"A Title\" data-content=\"And here's some amazing content. It's very engaging. right?\">button</a> should trigger a popover on click.</p>")
            }
        }
        $('#myModal').modal('show');
    })

显示模态:

Image displaying modal

我尝试使用此代码将动词更改为可以单击的按钮:

$(".modal-mody").append("<p>This <a href=\"#\" role=\"button\" class=\"btn btn-default popover-test\" title=\"A Title\" data-content=\"And here's some amazing content. It's very engaging. right?\">button</a> should trigger a popover on click.</p>")

但是,这不起作用,模态体是空白的。

有人知道如何以这种方式正确显示按钮吗?

修改

这是我的模态:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

愚蠢的我 - 这是一个错字:

$(".modal-mody").append("<p>This <a href=\"#\" role=\"button\" class=\"btn btn-default popover-test\" title=\"A Title\" data-content=\"And here's some amazing content. It's very engaging. right?\">button</a> should trigger a popover on click.</p>")

而不是

$(".modal-body").append("<p>This <a href=\"#\" role=\"button\" class=\"btn btn-default popover-test\" title=\"A Title\" data-content=\"And here's some amazing content. It's very engaging. right?\">button</a> should trigger a popover on click.</p>")

DOH