부트 스트랩 모달 : 현재 폐쇄, 새로 열기
한동안 찾았지만 이에 대한 해결책을 찾을 수 없습니다. 다음을 원합니다.
- 부트 스트랩 모달 내에서 URL을 엽니 다. 나는이 과정에서 일하고 있습니다. 따라서 콘텐츠가 동적으로로드됩니다.
- 사용자가이 모달 내부의 버튼을 누르면 현재 모달을 숨기고 그 직후에 사용자가 클릭 한 새 URL로 새 모달이 열리기를 원합니다. 두 번째 모달의이 내용도 동적으로로드됩니다.
- 사용자가 두 번째 모달을 닫으면 첫 번째 모달이 다시 돌아와야합니다.
나는 며칠 동안 이것을 쳐다보고 있었고 누군가가 나를 도울 수 있기를 바랍니다.
미리 감사드립니다.
특정 코드를 보지 않고는 정확한 답을 제공하기가 어렵습니다. 그러나 Bootstrap 문서에서 다음과 같이 모달을 숨길 수 있습니다.
$('#myModal').modal('hide')
그런 다음 숨겨지면 다른 모달을 표시합니다.
$('#myModal').on('hidden.bs.modal', function () {
// Load up a new modal...
$('#myModalNew').modal('show')
})
URL을 새 모달 창으로 푸시하는 방법을 찾아야하지만, 그게 사소하다고 생각합니다. 코드를 보지 않고는 예제를 제공하기가 어렵습니다.
나는 이것이 늦은 대답이라는 것을 알고 있지만 유용 할 수 있습니다. @karima가 위에서 언급했듯이이 작업을 수행하는 적절하고 깨끗한 방법이 있습니다. 실제로 한 번에 두 개의 함수를 실행할 수 있습니다. trigger
그리고 dismiss
모달.
HTML 마크 업;
<!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>
<div class="modal fade" id="SELECTOR" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body"> ... </div>
<div class="modal-footer"> <!-- ↓ --> <!-- ↓ -->
<ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
</div>
</div>
</div>
</div>
정확한 응답은 아니지만 현재 모달을 닫고 새 모달을 열 때 유용합니다.
동일한 버튼의 html에서 data-dismiss로 현재 모달을 닫고 data-target으로 직접 새 모달을 열도록 요청할 수 있습니다.
<button class="btn btn-success"
data-toggle="modal"
data-target="#modalRegistration"
data-dismiss="modal">Register</button>
문제 data-dismiss="modal"
는 콘텐츠가 왼쪽으로 이동한다는 것입니다.
나는 나를 위해 일한 것을 공유하고 pop1
있습니다.pop2
JS 코드
var showPopup2 = false;
$('#popup1').on('hidden.bs.modal', function () {
if (showPopup2) {
$('#popup2').modal('show');
showPopup2 = false;
}
});
$("#popup2").click(function() {
$('#popup1').modal('hide');
showPopup2 = true;
});
이 방법을 사용합니다.
$(function() {
return $(".modal").on("show.bs.modal", function() {
var curModal;
curModal = this;
$(".modal").each(function() {
if (this !== curModal) {
$(this).modal("hide");
}
});
});
});
다음 코드를 사용하여 첫 번째 모달을 숨기고 두 번째 모달을 즉시 열 수 있으며 동일한 전략을 사용하여 두 번째 모달을 숨기고 첫 번째 모달을 표시 할 수 있습니다.
$("#buttonId").on("click", function(){
$("#currentModalId").modal("hide");
$("#currentModalId").on("hidden.bs.modal",function(){
$("#newModalId").modal("show");
});
});
이 기능을 추가하려는 링크 또는 버튼에 다음 속성을 추가해야합니다.
data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"
상세 블로그 : http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/
BootStrap 3을 사용하면 다음을 시도 할 수 있습니다.
var visible_modal = jQuery('.modal.in').attr('id'); // modalID or undefined
if (visible_modal) { // modal is active
jQuery('#' + visible_modal).modal('hide'); // close modal
}
작업 테스트 : http://getbootstrap.com/javascript/#modals (먼저 "Launch Demo Modal"클릭).
나는 똑같은 문제가 있으며 내 해결책은 모달 대화 상자에 [role = "dialog"] 속성이있는 경우에만 있습니다.
/*
* Find and Close current "display:block" dialog,
* if another data-toggle=modal is clicked
*/
jQuery(document).on('click','[data-toggle*=modal]',function(){
jQuery('[role*=dialog]').each(function(){
switch(jQuery(this).css('display')){
case('block'):{jQuery('#'+jQuery(this).attr('id')).modal('hide'); break;}
}
});
});
data-dismiss="modal"
열려있는 기존 모델을 닫는 데 사용됩니다. 새 모델로 설정할 수 있습니다.
@Gravity Grave와 동일한 문제가있어 스크롤이 작동하지 않습니다.
data-toggle="modal" data-target="TARGET-2"
와 함께
data-dismiss="modal"
스크롤이 제대로 작동하지 않고 모달이 아닌 페이지 스크롤로 되돌아갑니다. 이는 태그에서 모달 오픈 클래스를 제거하는 데이터 해제 때문입니다.
결국 내 솔루션은 모달에서 내부 구성 요소의 html을 설정하고 CSS를 사용하여 텍스트를 페이드 인 / 아웃하는 것입니다.
클릭 기능 사용 :
$('.btn-editUser').on('click', function(){
$('#viewUser').modal('hide'); // hides modal with id viewUser
$('#editUser').modal('show'); // display modal with id editUser
});
주의 :
표시하려는 것이 독립 모달인지 확인하십시오.
$("#buttonid").click(function(){
$('#modal_id_you_want_to_hid').modal('hide')
});
// same as above button id
$("#buttonid").click(function(){
$('#Modal_id_You_Want_to_Show').modal({backdrop: 'static', keyboard: false})});
다른 방법을 사용합니다.
$('#showModal').on('hidden.bs.modal', function() {
$('#easyModal').on('shown.bs.modal', function() {
$('body').addClass('modal-open');
});
});
새 모달을 여는 동안 이전에 열린 모달을 닫으려면 먼저 현재 열려있는 모달을 닫은 다음 400ms 제한 시간을 제공하여 아래 코드와 같이 새 모달을 열 수 있도록 javascript / jquery에서 수행해야합니다. :
$('#currentModal').modal('hide');
setTimeout(function() {
//your code to be executed after 200 msecond
$('#newModal').modal({
backdrop: 'static'//to disable click close
})
}, 400);//delay in miliseconds##1000=1second
를 사용하여 시도하면 data-dismiss="modal"
@gravity 및 @kuldeep 주석에서 언급 한 스크롤 문제가 발생합니다.
질문에서 언급 한 것과 똑같은 것을 달성하고 싶었 기 때문에 답변 중 어느 것도 도움이되지 않았습니다.
이 목적을 위해 jQuery 플러그인을 만들었습니다.
/*
* Raj: This file is responsible to display the modals in a stacked fashion. Example:
* 1. User displays modal A
* 2. User now wants to display modal B -> This will not work by default if a modal is already displayed
* 3. User dismisses modal B
* 4. Modal A should now be displayed automatically -> This does not happen all by itself
*
* Trying to solve problem for: http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new
*
*/
var StackedModalNamespace = StackedModalNamespace || (function() {
var _modalObjectsStack = [];
return {
modalStack: function() {
return _modalObjectsStack;
},
currentTop: function() {
var topModal = null;
if (StackedModalNamespace.modalStack().length) {
topModal = StackedModalNamespace.modalStack()[StackedModalNamespace.modalStack().length-1];
}
return topModal;
}
};
}());
// http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
jQuery.fn.extend({
// https://api.jquery.com/jquery.fn.extend/
showStackedModal: function() {
var topModal = StackedModalNamespace.currentTop();
StackedModalNamespace.modalStack().push(this);
this.off('hidden.bs.modal').on('hidden.bs.modal', function(){ // Subscription to the hide event
var currentTop = StackedModalNamespace.currentTop();
if ($(this).is(currentTop)) {
// 4. Unwinding - If user has dismissed the top most modal we need to remove it form the stack and display the now new top modal (which happens in point 3 below)
StackedModalNamespace.modalStack().pop();
}
var newTop = StackedModalNamespace.currentTop();
if (newTop) {
// 3. Display the new top modal (since the existing modal would have been hidden by point 2 now)
newTop.modal('show');
}
});
if (topModal) {
// 2. If some modal is displayed, lets hide it
topModal.modal('hide');
} else {
// 1. If no modal is displayed, just display the modal
this.modal('show');
}
},
});
참고로 작업 바이올린, JSFiddle : https://jsfiddle.net/gumdal/67hzgp5c/
" showStackedModal()
"대신 내 새 API " " 로 호출하면 modal('show')
됩니다. 숨기기 부분은 여전히 이전과 동일 할 수 있으며 모달 표시 및 숨기기의 스택 방식이 자동으로 처리됩니다.
BootStrap 3.x를위한 간단하고 우아한 솔루션입니다. 이런 방식으로 동일한 모달을 재사용 할 수 있습니다.
$("#myModal").modal("hide");
$('#myModal').on('hidden.bs.modal', function (e) {
$("#myModal").html(data);
$("#myModal").modal();
// do something more...
});
첫 번째 모달에서 :
바닥 글의 모달 닫기 링크를 아래 닫기 링크로 바꿉니다.
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-primary" data-toggle="modal" data-target="#second_model_id">Close</a>
</div>
두 번째 모달에서 :
그런 다음 두 번째 모달은 상단 div를 아래 div 태그로 바꿉니다.
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add text for disabled people here" aria-hidden="true" id="second_model_id">
같은 문제가 있었는데, 미래의 누군가가 이것을 우연히 발견하고 스크롤 해야하는 여러 모달에 문제가있는 경우 여기에 작성하십시오 (부트 스트랩 3.3.7을 사용하고 있습니다)
내가 한 것은 첫 번째 모달 안에 다음과 같은 버튼이 있습니다.
<div id="FirstId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_2">Open modal</div>
첫 번째를 숨긴 다음 두 번째를 표시하고 두 번째 모달에는 다음과 같은 닫기 버튼이 있습니다.
<div id="SecondId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_1">Close</div>
따라서 두 번째 모달을 닫고 첫 번째 모달을 열고 스크롤 작업을 수행하기 위해이 줄에 .css 파일에 추가했습니다.
.modal {
overflow: auto !important;
}
추신 : 참고로,이 모달을 별도로 가져야합니다. 첫 번째 모달을 숨길 때 부 모달은 첫 번째 모달에 중첩 될 수 없습니다.
따라서 다음은 부트 스트랩 모달 예제를 기반으로 한 전체 예제입니다.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal 1 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Add lorem ipsum here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal2">
Open second modal
</button>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal">Close</button>
</div>
</div>
</div>
</div>
이 시도
$('#model1').modal('hide');
setTimeout(function(){
$('#modal2').modal('show');
},400);
mdb를 사용하는 경우이 코드를 사용하십시오.
var visible_modal = $('.modal.show').attr('id'); // modalID or undefined
if (visible_modal) { // modal is active
$('#' + visible_modal).modal('hide'); // close modal
}
<div class="container">
<h1>Bootstrap modal: close current, open new</h1>
<p class="text-muted">
A proper and clean way to get this done without addtional Javascript/jQuery. The main purpose of this demo is was to answer this
<a href="http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new">question on stackoverflow</a>
</p>
<hr />
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1">Launch Modal #1</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2">Launch Modal #2</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3">Launch Modal #3</button>
<!-- [ Modal #1 ] -->
<div class="modal fade" id="demo-1" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
<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 caps"><strong>Demo Modal #1</strong></h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Input Placeholder..." />
<span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">×</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
</div>
</div>
</div>
</div>
<!-- [ Modal #2 ] -->
<div class="modal fade" id="demo-2" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
<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 caps"><strong>Demo Modal #2</strong></h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Input Placeholder..." />
<span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">×</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
</div>
</div>
</div>
</div>
<!-- [ Modal #3 ] -->
<div class="modal fade" id="demo-3" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
<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 caps"><strong>Demo Modal #3</strong></h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Input Placeholder..." />
<span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">×</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
</div>
</div>
</div>
</div>
<hr />
<h3 class="caps">Usage:</h3>
<pre class="prettyprint"><!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>
<div class="modal fade" id="SELECTOR" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body"> ... </div>
<div class="modal-footer"> <!-- ↓ --> <!-- ↓ -->
<ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
</div>
</div>
</div>
</div></pre>
</div> <!-- end .container -->
<hr />
<footer class="text-center"><a href="https://twitter.com/_elmahdim">@_elmahdim</a></footer>
<br />
<br />
참고URL : https://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new
'programing' 카테고리의 다른 글
Spring MVC에서 포스트 데이터를 명시 적으로 얻는 방법은 무엇입니까? (0) | 2020.10.23 |
---|---|
기존 웹 앱 및 API의 인증, 권한 부여 및 세션 관리 (0) | 2020.10.23 |
CSS 전환이 위쪽, 아래쪽, 왼쪽, 오른쪽에서 작동하지 않습니다. (0) | 2020.10.23 |
현재 작업 디렉토리에 상대적인 경로를 얻습니까? (0) | 2020.10.23 |
Visual Studio 클래스 다이어그램이 관계를 표시하지 않음 (0) | 2020.10.23 |