弹框

HTML:

<div id="xingcheng">
        <div class="na-1">
            <img src="images/activity2.png" alt="log"/>
            <span>活动行程</span>
        </div>
        <div class="guihua">规划</div>
        <div class="tianxie">填写</div>
        <textarea  name="tianxietext" rows="" cols="" placeholder="填写！"></textarea>
    </div>



<div id="qita">
        <div class="na-1">
            <img src="images/activity7.png" alt="log"/>
            <span>其他</span>
        </div>
        <textarea name="qita" rows="" cols="" placeholder="有什么需要注意的事项可以写在这哦！"></textarea>
        <div>
            <span>0</span>/500
        </div>
    </div>

CSS:

#xingcheng{
    background: #ffffff;
    margin-top: 10px;
    height: 100px;
    position: relative;
}
#xingcheng textarea{
     100%;
    height: 100px;
    position: absolute;
    /*left: 15px;*/
    overflow: auto;
    margin-top: 100px;
    /*border-radius: 3px;*/
    border:1px solid #ddd;
    resize: none;
    display: none;
}
#xingcheng textarea:focus{
    background:  #ffffff;
    outline: none;
}

#qita{
    margin: 10px 0;
    background-color: #ffffff;
    height: 150px;
    position: relative;
    padding: 35px 15px 10px;
}

#qita textarea{
     100%;
    height: 100%;
}

#qita div:last-child{
    margin-top: -20px;
    position: absolute;
    right: 20px;
    font-size: 12px;
    color:#6A7272;
}

textarea:focus{
    background: transparent;
    outline: none;
}
textarea{
    resize: none;
}

JQUERY:
$(document).ready(function() {
    $('#qita textarea').focus(function () {
        $(this).attr('placeholder', '');
    }).blur(function () {
        $('[name="qita"]').attr('placeholder','有什么需要注意的事项可以写在这哦！');
    })
    $('.tianxie').click(function(){
        $('#xingcheng textarea').show();
        $('#qita').css('marginTop','110px');
        $('#xingcheng textarea').focus(function () {
            $(this).attr('placeholder', '');
        }).blur(function () {
            $('#xingcheng textarea').hide();
            $('#qita').css('marginTop','10px');
            $('[name="tianxietext"]').attr('placeholder','填写！')
        })


    })
});