如何创建文本输入弹出框

Question

我需要在laravel应用程序中创建一个文本输入弹出框。 参见下面的代码，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

@foreach ($project->tasks as $task)
  <ul>
    <li>
  <div>
  <div class="pull-right icons-align">
            <a href="" class="editInline"><i class="glyphicon glyphicon-plus"></i></a>
            <a href="" class="editInline"><i class="glyphicon glyphicon-pencil"></i></a>
            <a href="" class="editInline"><i class="glyphicon glyphicon-trash"></i></a>
        </div>
    <h4><a href="/projects/{{$project->id}}/tasks/{{ $task->id }}">{{ $task->task_name }}</a></h4>
 </div>
 </li>
 </ul>
  <hr>
@endforeach
</head>
<script>
$("a.editInline").css("display","none");

$('li').on('mouseover mouseout',function(){
     $(this).find('.editInline').toggle();
     //find the closest li and find its children with class editInLine and 
     //toggle its display using 'toggle()'
});
</script>
</body>

当我点击

<a href="" class="editInline"><i class="glyphicon glyphicon-plus"></i></a>

这个按钮图标我需要生成文本输入弹出。 我怎样才能做到这一点？

Answer 1

<a href="" class="editInline plusInput"><i class="glyphicon glyphicon-plus"></i></a>

var count = 0;
$('.plusInput').click(function(e){
 e.preventDefault();
 count++;
 $('any').append('<input type="text" value="Input '+count+'">');
})

注意：“ any”是要在其中插入输入的位置

JSFIDDLE演示