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

点击一个很棒的字体图标，我想打开一个弹出的文本区域

下面是我的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>

---

这是同样的理由。单击铅笔图标时，我想弹出一个文本区域，可能就像facebook上发生的那样。

在锚定标记后添加一个类似span的文本，并为图标标记提供一个id。然后使用切换

---

$'iconTagId'。单击函数{$'spanId'。切换；}

我不确定是否有后端逻辑，但以下是您应该为前端做的：

HTML:

CSS:

---

好的，这是我想到的。是应该帮助你开始的。我只在代码中添加了2个类，并通过jQuery控制它们

$'showbox'。单击，函数{ $'.profile div'.toggleClass'popup'； $'body'。切换类'showPopup'； } 身体{ 背景：fff； 过渡：all.2s； } .profile div包装器{ 宽度：100%； 位置：相对位置； 浮动：左； 填充：0 10px； 填充顶部：97px； } .档案室{ 利润率：5%自动； 背景色：fff； 宽度：400px； 位置：相对位置； /*浮动：左*/ 边缘底部：7px； 高度：自动； 填充：20px 15px 40px 15px； 边界半径：5px； 过渡：所有。2轻松； 边框：1px实心fff； } .profile分区标题{ 浮动：左； 位置：相对位置； 宽度：100%； 边缘底部：20px； } .剖面分区标题h3{ 显示：内联块； 字号：18px； 字体大小：400； 线高：33px； } .剖面分区标题a.bttn3{ 浮动：对； 线高：34px； 边界半径：4px； 高度：34px； 宽度：115px； 文本对齐：居中； 字体大小：12px； 颜色：fff； 背景色：673a9a； 文本转换：大写； } .档案室p{ 颜色：6464； 字体大小：14px； 线高：18px； 位置：相对位置； 边缘底部：15px； } .档案室p a{ 颜色：6464； 字体大小：14px； 左侧填充：20px； } .fa铅笔：之前{ 内容：\f040； } 法兰西{ 显示：内联块； 字体：普通14px/1字体； 字体大小：继承； 文本呈现：自动； -webkit字体平滑：抗锯齿； -moz osx字体平滑：灰度； } .弹出窗口{ 背景：F4； 盒影：2×2×10×ccc； 边框：1px实心ddd； } .显示弹出窗口{ 背景：eee； } 添加关于你自己的描述。。

请尝试以下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>

---

为锚点标记指定id或类名，如

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

CSS唯一解决方案

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

HTML

---

链接：

到目前为止，您尝试了什么？请给我们看看你的js代码。检查更新的提琴：添加一些css，使它看起来像一个弹出窗口it@PatrickMlr$.textfiled popup.clickfunction{$'.textfiled popup wrapper.css'display'，'block'；}；$。关闭_text_pop.clickfunction{$'.textfiled pop wrapper'.css'display'，'none'；}；这就是我正在尝试的JS，如果你满意的话SIR@SurajShukla请将此添加到您的问题中。所以每个人都会看到这一点。我看不到在你的生活中发生任何事情fiddle@SurajShukla你能解释更多吗？当我点击图标时，添加一个关于你自己的描述。。应弹出并成为文本字段/文本区域检查更新的小提琴。该区域是可编辑的。还有，你为什么不用一个textarea来代替p呢？它覆盖了整个div，我只想让p成为textfield。我不使用textfield，因为我不想让它从一开始就可以编辑。我希望它在图标点击时可以编辑。我不想使用模态。你看不到主要思想吗？这没什么区别。将您的图像粘贴到标签标签中，奇迹就会发生！

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

 <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>

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

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

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

<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>

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