jquery - Bootstrap动态加载div到模态中

Question

已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。

---

这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

已关闭 9 年前。

Improve this question

我正在尝试根据您使用类或动态变量等变量按下的链接或按钮，在 Bootstrap 模式中加载隐藏 div 的 html。

我已经设置但不起作用并且不加载模式中的内容的示例代码是

HTML

    <ul>
    <li class="span4 device">
        <div class="inner">        
            <div class="details1 hide">
                <label class="details1 control-label2">Device Type</label>
                <span class="details1 field2">Really cool device</span>
            </div>
            <div class="details2 hide">
                <label class="details2 control-label2">Device ID</label>
                <span class="details2 field2"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et <b>magnis dis parturient</b> montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</span>
            </div>
        </div>
        <a class="details1" data-toggle="modal" href="#product-details">View details 1</a>
        <a class="details2" data-toggle="modal" href="#product-details">View details 2</a>
    </li>
</ul>

var customModal = $('<div class="custom-modal modal fade bs-modal-sm col-sm-12 col-xs-12 modal2" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="modal-ru"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title" id="myModalLabel"></h4></div><div class="modal-body"></div></div></div></div>');

    var linkclass = $('a[data-toggle="modal"]').attr('class');

    $('a[data-toggle="modal"]').click(function(){    
        $('body').append(customModal);

        $('.custom-modal .modal-title').html( $(linkclass + '.control-label2').html() );
        $('.custom-modal .modal-body').html( $(linkclass + '.field2').html() );    
        $('.custom-modal .hide').show();
        $('.custom-modal').modal();

        $('.custom-modal').on('hidden', function(){
            console.log("hidden");
            $('.custom-modal').remove();
        });
    });

您可以在这里查看http://jsfiddle.net/D2RLR/6454/

Answer 1

1.你忘记在类名前加点:

$('.custom-modal .modal-title').html( $(linkclass + '.control-label2').html() );
$('.custom-modal .modal-body').html( $(linkclass + '.field2').html() );  

更改为

$('.custom-modal .modal-title').html( $('.'+linkclass +'.control-label2').html() );
$('.custom-modal .modal-body').html( $('.'+linkclass +'.field2').html() ); 

2.要访问单击的a标签的类，您需要在单击事件中使用它，如下所示:

  var linkclass = $(this).attr('class');

您可以在这里看到结果:link