2014-06-24 15 views
3

Jquery를 사용하여 다른 모달 안에 부트 스트랩 모달을 어떻게 만들 수 있습니까? 첫 번째 모달은 백그라운드에 있어야합니다. 한 번에 두 개 이상의 모달 표시에 사용자 정의 코드가 필요하다는 것을 알았을 때 부트 스트랩 문서를 참조 할 때. 어떤 생각?모달 안에 부트 스트랩 모달

답변

3

당신은 부트 스트랩 모달 플러그인 시도 싶어 수도 (Demo here - StackableSource here)

<div id="stack1" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h4 class="modal-title">Stack One</h4> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    <p>One fine body…</p> 
    <p>One fine body…</p> 
    <input class="form-control" type="text" data-tabindex="1"> 
    <input class="form-control" type="text" data-tabindex="2"> 
    <button class="btn btn-default" data-toggle="modal" href="#stack2">Launch modal</button> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" data-dismiss="modal" class="btn btn-default">Close</button> 
    <button type="button" class="btn btn-primary">Ok</button> 
    </div> 
</div> 

<div id="stack2" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h4 class="modal-title">Stack Two</h4> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    <p>One fine body…</p> 
    <input class="form-control" type="text" data-tabindex="1"> 
    <input class="form-control" type="text" data-tabindex="2"> 
    <button class="btn btn-default" data-toggle="modal" href="#stack3">Launch modal</button> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" data-dismiss="modal" class="btn btn-default">Close</button> 
    <button type="button" class="btn btn-primary">Ok</button> 
    </div> 
</div> 

<div id="stack3" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h4 class="modal-title">Stack Three</h4> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    <input class="form-control" type="text" data-tabindex="1"> 
    <input class="form-control" type="text" data-tabindex="2"> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" data-dismiss="modal" class="btn btn-default">Close</button> 
    <button type="button" class="btn btn-primary">Ok</button> 
    </div> 
</div> 

는 src 폴더에서 모두의 .js 파일을 추가하는 것을 잊지 마십시오.