자바 스크립트 모달 창 통화 기능 - UI

Question

부트 스트랩 나는 변수 contentStr에 HTML 코드를 가지고 있고 그래서 트위터 부트 스트랩 UI 기능 modal()과 모달 창에서이 HTML 코드를 호출하려고 내가 할이 :

$(contentStr).modal(); 

하지만이 코드 나를 위해 숨겨진 모달 창을 렌더링하고 HTML은 다음과 같습니다

<div class="modal-backdrop in"></div> 
<div class="in" aria-hidden="true"> 
    <h5>Hog Wild Pit BBQ</h5> 
    <p>662 E 47th Street South, Wichita, KS, United States</p> 
    <img src="https://lh5.googleusercontent.com/-qyHUXQNgfHM/Ufl7s8AQY2I/AAAAAAAABxk/u3X0W75mhGo/w500-h500-s0/photo.jpg"> 
    <br>(316) 522-7636 
    <br><a target="_blank" href="http://www.hogwildpitbbq.com/">http://www.hogwildpitbbq.com/</a> 
    <br>The food was tasty with good-sized portions and was served quickly. My wife, two-year old daughter an I ate one dinner with the turkey, ribs, and pulled pork. Others might want to eat more but that was good for us. The turkey was a little dry but 
    otherwise everything was great. The corn and cole slaw sides were decent. The Texas toast was good and sauces were great. Pickles and chilies were also available. 
    <br> 
    <br>Traveling through Texas, Oklahoma, and Kansas today I found a new BEST BAR-B-Q with Hog Wild Pit Bar-B-Q. Just as quick it was served to me I finished. Back on the road again... EAT HERE...you will make it back and you will remember. 
    <br> 
    <br>Favorite BBQ so far unless I have the time to throw it down on the grill! 
    <br> 
    <br>Best Barbeque in Kansas. 
    <br> 
    <br>I've eaten at the Hog Wild on 47th street a few times and it has always been excellent. Their ribs are the best I've ever had. I live in the Memphis, TN, area and have not found anywhere around here that has ribs nearly as good as Hog Wild. 
    <br> 
    <p>1092.941km</p> 
    <p>9 hours 23 mins</p> 
    <p>950.56km</p> 
    <p>08:38:0</p> 
    <button id="dodaj">Add to timeline</button> 
</div> 

그래서 내가 볼 수없는, 난 그냥 불투명 배경이 모달 창을 표시 할 수 없습니다.

어떻게 해결할 수 있습니까?

Answer 1

샘플을 만들었으므로이 작업을 수행 할 수 있습니다.

하십시오

, take a look

당신이해야 할 첫 번째 일은 Conver 유럽 진리의 HTML에 HTML 문자열입니다.

var myModal = '<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div></div>' 

"modal fade"으로 클래스 속성을 설정해야합니다. 주목할 점은 '을 사용하여 HTML 문자열을 래핑하고, 내 html 문자열에서 "을 사용한다는 것입니다. 중요한 점입니다.

'show'을 전달하는 $(myModal).modal('show');을 호출합니다.

도움이 되었기를 바랍니다.