홈>
모달 창을 버튼에 첨부했습니다. 버튼을 클릭하면 메시지와 함께 열리는 모달 창을 원합니다. 모달 창이 닫히면 버튼 동작을 계속하십시오 (새 프레임 열기). 현재 몇 초 동안 모달 창이 나타나면 버튼 클릭으로 새 프레임이 열리고 모달이 사라집니다.
내 코드는 다음과 같습니다. 내 모달 창 CSS + HTML
<style>
/* The Modal (background) */
.modal {
display: visible; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
내 JS 의사 코드 :
.....
let popUpInstruction = require("!text-loader!./Instructions.html");
let editButton = frame.contents().find('input[name$="edit"]'); // just for testing bound it to the Edit button
....
if ( someStatement) {
let place = frame.contents().find(".headerContent");
let popUpInstructionHTML = $($.parseHTML(popUpInstruction));
popUpInstructionHTML.appendTo(place);
let closeButton = popUpInstructionHTML.contents().find(".close")[0];
editButton.on("click", function () { // just for testing bound it to the Edit button
popUpInstructionHTML.show();
//how to make the code to stop here and wait for popUpInstructionHTML to be closed , brefore continue with the editButton action ?
// When the user clicks on <span> (x), close the modal
$(closeButton).on("click", function() {
popUpInstructionHTML.hide();
});
});
}
여기 내 버튼이 있습니다 :
<input value=" Edit " class="btn" name="edit" title="Edit" type="button" onclick="navigateToUrl('url','DETAIL','edit');">
편집 버튼을 클릭하면 다른 프레임이로드되고 모달 창이 닫힙니다.
- 답변 # 1
관련 자료
- javascript - 외부 모달 창을 닫고 내부에 클릭 가능한 링크가 있습니다
- onclick - 버튼을 클릭 할 때 부트 스트랩 모달이 트리거되지 않습니다jQuery
- groovy - ReadyAPI에서 AccessToken을 가져오고 브라우저 창을 닫는 방법
- javascript - 명령문을 실행하는 동안 PHP를 사용하여 모달 팝업을 트리거하는 버튼을 반복하는 방법
- 버튼 이름이있는 앵귤러 7에서 부트 스트랩 모달 양식을 여는 방법
- visual studio code - VSCode 확장에서 확인 버튼으로 창에 HTML 표시
- jquery ui - 취소 버튼 동작을 개선하고 닫기와 동일하게 작동하는 방법은 무엇입니까?
- r - 반짝이는 앱에서 창을 팝업하기 위해 스크롤 막대와 크로스 버튼을 추가하는 방법은 무엇입니까?
- python - matplotlib 창을 프로그래밍 방식으로 닫는 방법은 무엇입니까?
- Javascript를 사용하여 창을 닫는 방법?
- vb.net - Firefox에서 Aspnet 모달 버튼 OnClick 이벤트가 시작되지 않음
- angularjs - 클릭 버튼 후 조건에서 앵귤러 UI 모달을 닫는 방법
- python - pyqt5의 두 번째 창에서 버튼이 작동하지 않습니다
- swift - swiftui - 모달 닫기
- selenium - 닫기 또는 확인 버튼을 클릭하거나 배경을 클릭하여 팝업을 해제하는 방법
- c# - 버튼 클릭 이벤트 후 새 창 열기
- Yii2 - yii2 - 모달을 닫을 때 입력 값 유지
- javascript - 버튼 클릭으로 부트 스트랩 모달을 여는 방법
- javascript - iFrame 안에 원래 닫기 버튼을 추가하는 방법은 무엇입니까?
- python - tkinter를 사용하여 두 번째 창에 "돌아 가기 버튼"을 만드는 방법은 무엇입니까?
관련 질문
- javascript : 반응 -원시 요소 테마를위한 선언을 병합합니다
- javascript : Typescript로 재사용 가능한 함수 만들기
- javascript : ngif div 안에 배치 된 모든 것을 다시로드하는 Angular 자식 구성 요소
- javascript : NaN을 반환하거나 아무것도 반환하지 않는 각도 데이터 바인딩
- javascript : Promise와 Redis 연결
- javascript : JS의 정렬 기능을 사용하여 브라우저가 다른 브라우저처럼 작동하도록하는 방법 (각도 포함)
- javascript : 타이프 스크립트에서 객체에 동적 요소를 추가하는 방법
- javascript : RxJs-하나의 관측 가능 데이터를 다른 관측 가능 항목에서 사용하고 다른 관측 가능 항목으로 결과를 반환합니다.
- javascript : 플레이어 변경 기능을 어떻게 구현합니까?
- javascript : Jasmine : 메서드에 대한 템플릿 참조 전달을 테스트하는 방법
jQuery를 사용하여 사용자 정의 이벤트를 트리거 할 수 있습니다. 따라서 다음과 같이 작동해야합니다.
closeButton 클릭 핸들러를 연결하기 전에 팝업이 닫히기를 기다리는 이유를 잘 모르지만이 답변에서 필요한 것을 추출하여 상황에 맞게 수정할 수 있기를 바랍니다.