2013-10-27 21 views
1

我有HTML代碼爲可變contentStr和我打電話的模式窗口此HTML代碼與Twitter的引導UI功能modal()所以我這樣做:的JavaScript模態窗口調用函數 - 引導UI

$(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> 

,所以我不能看,我不能顯示模式窗口只是一個不透明的背景是存在的。

我該如何解決這個問題?

+0

所以這段代碼不會顯示模態的HTML,只顯示下面我的其他內容的HTML ... –

回答

2

我做了一個樣本,所以你可以做到這一點。

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字符串中,我使用了",這是一件很重要的事情。

然後,我打電話$(myModal).modal('show');傳遞參數'show'

我希望這對你有所幫助。

+0

well becouse我的情況有點複雜,我不能這樣做,所以這個不工作,我先點擊標記,然後我必須調用模態 –

+0

我做了一個樣品,如果你想,請看看 –

+0

讓我知道這是否有幫助。 –