如何创建文本输入弹出框

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+'">'); 
}) 

注：“任何”就是你要插入

JSFIDDLE DEMO