Question

我有一个项目，我们在同一页面上有多个模态。因此，我们的想法是从单击的按钮获取id并将该id附加到模态。例如：

以下是我在plunker中的代码：bootstrap modal

 <button class="btn btn-readmore" data-toggle="modal" href="modals/serv-cutting.html" data-target="#vividCutting">read more</button>

 <button class="btn btn-readmore" data-toggle="modal" href="modals/serv-color.html" data-target="#vividColor">read more</button>

然后将该id属性添加到：

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

所以我有很多模态，我想出了这个jQuery，好像我先不删除id，然后所有触发模态的按钮都会保持打开相同的模态：

$('button.btn-readmore').click(function() {
    var newId = $(this).attr('data-target').slice(1);
    console.log(newId);
    if($('.modal').prop('id', newId)){
        $(this).removeProp('id', newId);
    } else {
        $('.modal').prop('id', newId)
    }
});

我认为我很接近，但需要一些建议。

Answer 1

根据您对我之前的回答和问题更新的评论，看起来您想重新使用相同的模式，并根据点击的按钮加载远程内容。

HTML：

<button class="btn btn-readmore" data-toggle="modal" href="modals/serv-color.html" data-target="#modal1">read more 1</button>
<button class="btn btn-readmore" data-toggle="modal" href="modals/serv-cutting.html" data-target="#modal1">read more 2</button>
<div id="modal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
</div>

在隐藏模式之后销毁模式的JavaScript，以便在每次重新创建时允许加载远程内容，Twitter bootstrap remote modal shows same content everytime提供

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

jQuery添加和删除属性

1 个答案: