Question

我整个上午都在看书但是......我被困住了。我正在尝试加载一个Bootstrap模式，其中包含来自我网站上另一个页面的内容（同一个域）。它有点工作，但模态加载整个页面，而不仅仅是我需要的内容。我需要一种针对特定div的方法，因此它不会加载所有内容。

一些背景 - 该网站使用Smarty，每个页面都附加到主要布局。所以模式是加载侧栏菜单等我不想要。我需要内容的另一个页面有Smarty标签，只能在它自己的特定页面上工作，所以我无法将脚本/内容移动到与模态脚本相同的页面（标签不会加载）。

这是我到目前为止所拥有的;

按钮;

 <a data-toggle="modal" href="{$file_name}?a=cart&amp;action=new&amp;main_type=listing_edit&amp;listing_id={$listing.id}" data-target="#edit"><img src="{external file='images/buttons/listing_edit.gif'}" alt="{$messages.509}" /></a>

模态;

  <div class="modal fade in" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">

        <div class="modal-header">
            <h3 class="modal-title"><i class="fa fa-pencil"></i>Edit My Listing</h3>
        </div>
        <div class="modal-body">
            <p class="page_instructions">Loading...</p>
        </div>

        <div class="modal-footer"></div>
    </div>
</div>

模态获取内容的页面;

<div class="modal-header">
    <h3 class="modal-title"><i class="fa fa-pencil"></i>{$messages.482}</h3>
</div>
<div class="modal-body">
    <p class="page_instructions">{$messages.483}</p>

    {if $error_msgs.cart_error}
        <div class="field_error_box">
            {$error_msgs.cart_error}
        </div>
    {/if}

    <div class="center">
        <ul class="button_list">
            {foreach from=$choices item=label key=step}
                <li>
                    <a href="{$nextPage}&amp;doStep={$step}" class="btn-block btn-u btn-brd btn-brd-hover rounded btn-u-blue btn-u-sm margin-bottom-5">
                    <div class="row">
                        <div class="col-md-3"><i class="fa fa-pencil"></i></div>
                                <div class="col-md-6"><span>{$label}</span></div>
                                <div class="col-md-3"></div>
                            </div>
                            </a>
                        </li>
                    {/foreach}
                </ul>

                <div class="clr"><br /></div>

                <ul class="button_list">
                    <li><a href="{$previewUrl}" onclick="window.open(this.href,'previewWindow','scrollbars=yes,status=no,width=800,height=600'); return false;" class="btn-block btn-u btn-brd btn-brd-hover rounded btn-u-orange btn-u-sm margin-bottom-5">
                            <div class="row">
                                <div class="col-md-3"><i class="fa fa-file-text-o"></i></div>
                                <div class="col-md-6"><span>{$messages.500483}</span></div>
                                <div class="col-md-3"></div>
                            </div>
                        </a>
                    </li>
                    <li><a href="{$cart_url}&amp;action=cancel" class="btn-block btn-u btn-brd btn-brd-hover rounded btn-u-red btn-u-sm margin-bottom-5">
                            <div class="row">
                                <div class="col-md-3"><i class="fa fa-times"></i></div>
                                <div class="col-md-6"><span>{$messages.500257}</span></div>
                                <div class="col-md-3"></div>
                            </div>
                        </a>
                    </li>
                </ul>

                <div class="clr"><br /></div>
            </div>  
        </div>
        <div class="modal-footer">
            <ul class="button_list center">
                <li><a href="{$nextPage}&amp;doStep=continue" class="btn-block btn-u btn-brd btn-brd-hover rounded btn-u-green btn-u-sm">
                        <div class="row">
                            <div class="col-md-3"><i class="fa fa-check"></i></div>
                            <div class="col-md-6"><span>{$messages.500256}</span></div>
                            <div class="col-md-3"></div>
                        </div>
                    </a>
                </li>
            </ul>

            <div class="clr"><br /></div>
        </div>

Answer 1

我不确定这是否是最佳方法，但它会起作用：

$(function(){

    $.get('http://dodsoftware.com/sotests/get_test/content.html', function(result){
         var otherPageBody=result.match(/<body>([\s\S]+)<\/body>/)[1];
         var $otherPageBody=$('<div>'+otherPageBody+'<\div>');
         var targetContent = $otherPageBody.find('#target-content')[0].outerHTML;
         $('.result').append(targetContent);
    });

});

Here is a working example

请注意，您需要在其中添加一些检查，以避免在找不到内容时出错。

针对Bootstrap 3 Modal的特定div

1 个答案:

Here is a working example