Question

点击font-awesome图标，我想打开一个弹出一点的文字区域。

以下是我的HTML的样子

<div class="profile-div">
 <div class="header">
  <img src="assets/images/image.png" alt=""><h3 ></h3>
   <a href="#" class="bttn3">Edit Profile</a>
 </div>
 <p>Add a description about your self.. 
  <a href="#"><i class="fa fa-pencil" aria-hidden="true"></i>
  </a>
 </p>
</div>

这是相同的fiddle。点击铅笔图标，我想要一个文本区域弹出一点，也许就像它发生在Facebook上。

Answer 1

在锚标记之后添加<span id="spanId" style="display: none">Text</span>之类的范围并为图标标记指定ID。然后使用toggle()。

$('#iconTagId').click(function(){$('#spanId').toggle();});

Answer 2

试试这个html：

确保在页面的bootom中使用jquery.js和bootstrap.js

 <p>Add a description about your self.. 
  <a href="#"><i class="fa fa-pencil" data-toggle="modal" data-target=".bs-example-modal-lg" aria-hidden="true"></i>
  </a>
 </p>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myLargeModalLabel">Signature</h4>
            </div>
            <div class="modal-body">
                <label style="padding-left: 0px;" class="control-label col-md-3 col-sm-3 col-xs-12">
                    Enter Email
                </label>
                <input type="text" id="txtVerifyEmail" class="form-control" placeholder="Enter Email" />

            </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" id="btnverifydismiss" data-dismiss="modal">Close</button>

            </div>
        </div>
    </div>
</div>
</div>

Answer 3

为您的锚标记提供ID或类名称，例如

<a href="#" id="editPencil"><i class="fa fa-pencil" aria-hidden="true"></i></a>

在锚标记之后，您可以在html代码中添加textarea，如下所示

<div class="form-group" id="comment" style="display:none;">
     <textarea class="form-control" id="commentBox"></textarea>
</div>

在您的脚本中，使用以下JQuery函数。因此，点击铅笔图标，您可以打开文本区域

$(document).ready(function(){
    $("#editPencil").click(function(){
        $("#comment").toggle();
    });
});

Answer 4

仅CSS解决方案

只需使用某些样式和隐藏的复选框以及样式标签即可构建简单的切换逻辑：

HTML

<label for="checkbox">
    <img src="http://i.imgur.com/BdHAZdS.png" alt="">
</label>

<input id="toggle" type="checkbox"/>
<p>
    <input type="text" placeholder="Add a description about your self.."> 
    <a href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a>
</p>

CSS

.toggle-button {
    // Button styles go here
}    
#checkbox {
    display: none;
}
#checkbox:checked + p {
    display: block;
}

链接： JsFiddle

Answer 5

我不确定是否有后端逻辑，但这是你应该为前端做的事情：

https://jsfiddle.net/jqr1L2Lh/

HTML：

<div class="profile-div">
    <div class="header">
        <img src="http://i.imgur.com/BdHAZdS.png" alt="">
        <h3></h3>
        <a href="#" class="bttn3">Edit Profile</a>
    </div>
    <p><span>Add a description about your self..</span>
        <a id='edit-button' href="#"><i class="fa fa-pencil" aria-hidden="true"></i>
  </a>
    </p>
</div>
<div class="popup">
    <label>Edit the description</label>
    <textarea></textarea>
    <button>Done</button>
</div>

JS：

$(document).ready(function() {
    $('#edit-button').click(function() {
        $('div.popup').show();
        $('div.popup textarea').val($('div.profile-div p>span').html());
    });
    $('div.popup button').click(function() {
        $('div.profile-div p>span').html($('div.popup textarea').val());
        $('div.popup').hide();
    });
});

CSS：

.popup {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
}

Answer 6

好的，这就是我想出来的。是应该帮助你开始。我只为你的代码添加了两个类，并通过jQuery控制它们。

$('#showbox').on('click', function(){
  $('.profile-div').toggleClass('popup');
  $('body').toggleClass('showPopup');
})

body{
  background: #fff;
  transition: all .2s;
}



.profile-div-wrapper {
    width: 100%;
    position: relative;
    float: left;
    padding: 0 10px;
    padding-top: 97px;
}
.profile-div {
  margin: 5% auto;
    background-color: #fff;
    width: 400px;
    position: relative;
/*     float: left; */
    margin-bottom: 7px;
    height: auto;
    padding: 20px 15px 40px 15px;
    border-radius: 5px;
    transition: all .2s ease;
  
  border: 1px solid #fff;
}
.profile-div .header {
    float: left;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}


.profile-div .header h3 {
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    line-height: 33px;
}

.profile-div .header a.bttn3 {
    float: right;
    line-height: 34px;
    border-radius: 4px;
    height: 34px;
    width: 115px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background-color: #673a9a;
    text-transform: uppercase;
}

.profile-div p {
    color: #646464;
    font-size: 14px;
    line-height: 18px;
    position: relative;
    margin-bottom: 15px;
}

.profile-div p a {
    color: #646464;
    font-size: 14px;
    padding-left: 20px;
}

.fa-pencil:before {
    content: "\f040";
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.popup{
  background: #f4f4f4;
  box-shadow: 2px 2px 10px #ccc;
  border: 1px solid #ddd;
}
.showPopup{
  background: #eee;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="profile-div">
  <div class="header">
    <img src="http://i.imgur.com/BdHAZdS.png" alt="">
    <h3></h3>
    <a href="#" class="bttn3">Edit Profile</a>
  </div>
  <p>Add a description about your self..
    <a href="#" id="showbox"><i class="fa fa-pencil" aria-hidden="true"></i> </a>
  </p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

单击图标，打开弹出文本区域

6 个答案: