Question

我将HTML代码放入变量contentStr，我尝试使用twitter bootstrap 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

您需要做的第一件事就是将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'。

我希望这对你有所帮助。

Javascript模态窗口调用函数 - bootstrap UI

1 个答案: