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

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 字符串转换为 truth 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'。

希望对你有帮助