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

Bootstrap动态地将div加载到模态中

1 个答案: