Question

单击“编辑”时，我想在新窗口/弹出窗口中生效。

我希望在点击“编辑”之后出现“编辑用户”部分，但是这样：

这是代码：在评论中链接到JSfiddle JS

'use strict';

$.ajax({
    type: 'GET',
    url: url,
    datatype: 'json',
    success: function (data) {

        for (var i in data.people) {
            var name = data.people[i].imię && data.people[i].nazwisko;
            var p = '<div id="data"> <p>'+name+'</p></div>';
            $('#name').append(p);
        }
        for (var i in data.people) {
            var mail = data.people[i].mail;
            var p = '<div id="data"> <p>' + mail + '</p></div>';
            $('#mail').append(p);
        }
        for (var i in data.people) {
            var ico = data.people[i].ico;
            var z = '<div class="action">' + ico +'<div id="dropDown" class="menu">' +
                '<a href="#Edit">Edit</a><a href="#Remove">Remove</a></div></div></div>';

            $('#actions').append(z);
        }

        var p ='<div class="dropbtn">';
        $('.action').append(p);


        $('.dropbtn').click(function () {
            $('.menu').removeClass('show');
            $(this).siblings('.menu').addClass('show');
        });

    }
});

有人可以给我一个提示

Answer 1

var editPopup = $('.edit');

$('body').on('click', '.action-edit', function(ev) {
    ev.preventDefault();

  var index = $(this).closest('.action').index();
  var name = $('#name div').eq(index).text();
  var mail = $('#mail div').eq(index).text();

  editPopup.find('#dataEdit input').val(name);
  editPopup.find('#emailInput').val(mail);
});

https://jsfiddle.net/tabkgyem/1/

Answer 2

你是否使用过simplemodal插件？如果是的话，就是这样的代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<script   type="text/javascript" src="jquery-1.8.3.js"  ></script>
<script   type="text/javascript" src="jquery.simplemodal.js"></script>
<title>example</title>
<style type="text/css">
    #lol
    {
        width:100px;
        height:100px;
        border:1px red solid;
    }
    #osx-overlay
    {
        background-color:black;
    }
</style>
<script type="text/javascript">
    //chrome 49
    $(function()
    {
        $("#lol").modal({
            overlayId: 'osx-overlay',
            overlayClose: true,
            opacity:20,
        });
    })
    //Note the version of simplemodal(1.4.4) and jquery
</script>
</head
<body>
    <div id="lol"></div>
</body>
</html>

如何获得“新窗口”形式示例的效果

2 个答案: