画像アイコンをクリックすると、アイコンがクリック可能になり、ポップアップ[ダイアログボックス]が開いて新しい画像をアップロードする必要があります...参照用のサンプル画像事前にこのおかげで私を助けてください
<div class="d-flex align-items-start summary" style="margin-bottom: 10px;">
<img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);"
class="mr-3 d-none d-sm-block" alt="...">
<i *ngIf="isEditItems" style="color : white;left: 52px;
position: absolute; top: 65px; padding: 3px; background-color: rgb(0, 195, 255); border-radius: 50%;font-size: 12px;"
class="fa fa-pencil fa-lg" aria-hidden="true" ></i>
<div>
<div class="summary-details">This is a sample text. You can upload your profile picture here. This
will be visible to all clients in your contact information. You can change it again if you
want.
</div>
</div>
</div>ブートストラップを使用しているので、ポップアップにはブートストラップモーダルを使用できます。
HTMLで、次の変更を加えます。
追加 data-toggle="modal" data-target="#myModal"
<img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);" class="mr-3 d-none d-sm-block" alt="..." data-toggle="modal" data-target="#myModal">
次に、以下を含めます。
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Profile information</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
実施例は、ここにあるhttps://www.bootply.com/fzlrwIyyXK
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加