바닥 글의 닫기 버튼 왼쪽에 제출 버튼이있는 매우 친숙한 부트 스트랩 모달이 있습니다. 그러나 특정 유효하지 않은 양식 채우기에 대해 제출 단추를 비활성화하고 있지만 몇 가지 작업 중 하나를 수행하려고합니다. 단추를 활성화하여 사람들이 클릭 할 수 있도록하고 도구 설명에 오류가 표시되도록합니다. 또는 익숙한 비활성화 된 모양으로 버튼을 그대로 두지 만 누군가가 클릭하면 툴팁이 표시됩니다. 어느 쪽이든 상황에 관계없이 제출 버튼 상단에 div가 필요합니다.
#clickable {
position: absolute;
width: 55px;
height: 25px;
background-color: pink;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-footer">
<div id="clickable"></div>
<button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>✓ Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>(방금 분홍색으로 만들어 착륙 위치를 볼 수 있습니다). 현재 이것은 제출 버튼이 아닌 닫기 버튼에 적용됩니다. 제출 버튼에 꼭 맞도록하는 방법에 대한 아이디어가 있습니까?
내가 당신의 요지를 이해했는지 모르겠습니다. 버튼을 숨기고 싶다면 유사 요소를 사용할 수 있습니다.
의사 요소를 사용하지 않는 이유는 무엇입니까?
기본적으로 position: relative버튼 내부 를 사용 하여 새 공간 참조로 만듭니다. 내부에있는 가상 요소에 대한 참조로 사용되며 위쪽 / 아래쪽 / 왼쪽 / 오른쪽 : 0으로 스트레치하면 그게 다입니다. 스타일링 목적으로 DOM을 추가 할 필요가 없습니다.
.btn-submit:disabled {
position: relative;
}
.btn-submit:disabled::after {
background-color: pink;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
}<div class="modal-footer">
<button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>✓ Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>도구 설명이 되길 원한다면 도구 설명과 버튼을 모두 감싸 야합니다.
.tooltip-container {
display: inline-block;
position: relative;
}
.tooltip {
background-color: pink;
position: absolute;
left: 0;
top: 0;
width: 55px; //Note that fixing size is probably a bad idea.
height: 25px;
}<div class="modal-footer">
<div class="tooltip-container">
<div class="tooltip">This is the tooltip.</div>
<button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>✓ Submit</button>
</div>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다