twitter-bootstrap Twitter Bootstrap 模式 - 加载“远程”内容

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13503711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 15:45:54  来源:igfitidea点击:

Twitter Bootstrap modal - load "remote" content

twitter-bootstrapmodal-dialog

提问by bear

I'm trying to load "remote" content, basically information that is sent through a HTTP request (on the same site). The returned content itself throws back information such as :

我正在尝试加载“远程”内容,基本上是通过 HTTP 请求(在同一站点上)发送的信息。返回的内容本身会返回信息,例如:

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;    </button>
<h3>Change Your Password</h3>
</div>
<div class="modal-body">
<form>
    <fieldset>
        <label>Your current password</label>
        <input type="password" placeholder="password">
        <label>Confirm current password</label>
        <input type="text" placeholder="password">

        <button type="submit" class="btn">Submit</button>
    </fieldset>
</form>
</div>
<div class="modal-footer">
    <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
</div>

However, for the modal box to show the remote content, I believe that I should be showing the modal-bodyclass already:

但是,对于显示远程内容的模式框,我相信我应该已经显示了modal-body类:

<div class="modal fade hide" id="ajax">
    <div class="modal-body">
        <p>body content to be replaced</p>
    </div>
</div>

How do I step around this, and provide the full modal div content and make it show properly?

我该如何解决这个问题,并提供完整的模态 div 内容并使其正确显示?

采纳答案by Jeromy French

It seems like you want to populate the modal body with a webpage. You could invoke the modal using an atag and using the data-target attributes:

您似乎想用网页填充模态正文。您可以使用a标签和数据目标属性调用模式:

<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/6K8rD/show/" data-target="#utility" class="btn">Modal 1</a>

<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/6K8rD/show/" data-target="#utility" class="btn">Modal 1</a>

The Twitter documentationnotes

Twitter的文档注释

If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body. If you're using the data api, you may alternatively use the href tag to specify the remote source.

如果提供了远程 url,内容将通过 jQuery 的 load 方法加载并注入到 .modal-body 中。如果您使用的是数据 API,您也可以使用 href 标签来指定远程源。

See http://jsfiddle.net/jhfrench/qv5u5/for an example (and see How can I reuse one Bootstrap modal div?for details on how to resuse one modal between multiple invoking links).

有关示例,请参阅http://jsfiddle.net/jhfrench/qv5u5/(有关如何在多个调用链接之间重用一个模态的详细信息,请参阅如何重用一个 Bootstrap 模态 div?)。