将div添加到模态窗口

时间:2018-05-07 22:27:39

标签: javascript html modal-dialog window

我正在创建一个包含一些节点的表。当我点击表格中的特定节点时,会打开一个模态窗口(在这个模态窗口中,我需要插入我存储在div中的数据)。

/*each node is a hyperlink and has the "#animatedModal" href, and also a different id*/

var b = document.querySelectorAll("a");
        b[i].setAttribute("id", i);
        b[i].setAttribute("href", "#animatedModal");



 /*when a particular node is clicked, the getEndpoints function is called*/
 $("a").click(function(test) {
        getEndpoints(test.target.innerHTML);//innerHTML= node id number
    });

getEndpoints函数从服务器收集节点信息并将数据插入div

function getEndpoints(nodeid) {
$.get( "http://.../node/" + nodeid, function( node ) {
    window.data = node;
    var key = ["epid", "clslist", "loc", "name", "type", "zplus"];
    var endpoints = node.endpoints[0];
        for(var k = 0; k < key.length; k++){
            $("#" + key[k]).text(endpoints[key[k]]); //this selects each id from the div(the id is the same as the key) and adds the value from the server to each key)
        }
   })}

此div始终显示已单击的节点的信息。例如:如果我按第一个节点,div显示第一个节点的信息,依此类推。

<div id="endDiv">
    <ol>
        <li><label>epid: </label><span id="epid"></span> </li>
        <li><label>clslist: </label><span id="clslist"></span> </li>
        <li><label>loc: </label><span id="loc"></span> </li>
        <li><label>name: </label><span id="name"></span> </li>
        <li><label>type: </label><span id="type"></span> </li>
        <li><label>zplus: </label><span id="zplus"></span> </li>
    </ol>
</div>

使用此功能创建模态窗口:

function createModal() {
var content = $('<div/>', {
    class: 'modal-content'
})
var createAnimation = $('<div/>', {
    id: 'animatedModal'
});
var closeAnimation = $('<div/>', {
    class: 'close-animatedModal'
});
$(".table-fill").append(createAnimation);
$("#animatedModal").append(content).append("CONTENT HERE");
$("#animatedModal").append(closeAnimation);
$(".close-animatedModal").append(closeAnimation).append("PRESS TO CLOSE");

所以,而不是&#34; CONTENT HERE&#34;,我希望我的模态窗口显示带有节点信息的div。

我试过了但没有任何结果:

$(".modal-content").append("#endDiv");

var divInfo = document.getElementById("endDiv").textContent;
 $("a").on( "click", function() {
   $(".modal-content").text(divInfo) );
 });

有人可以帮我这个吗?

0 个答案:

没有答案