1

I have HTML code into variable contentStr and I try to call this HTML code in modal window with twitter bootstrap UI function modal() so I do this:

   $(contentStr).modal();

but this code render for me a hidden modal window and html looks like this:

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

SO I can't see, I can't show modal window just a opacity background is there.

How I can solve this?

4

1 回答 1

2

我做了一个样本，所以你可以随心所欲地做这个。

请看一下

您需要做的第一件事是将 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…&lt;/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'。

我希望这对你有帮助。

于 2013-10-27T23:06:23.393 回答