如何創建文本輸入彈出框

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