在不覆盖的情况下创建 object DOM 推特引导模式

Question

我想在我的模态 window.

中创建不同的 object 以不覆盖代码

我有以下 window 模态：

<div class="modal fade" id="box-modal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
            <div class="modal-dialog">
                <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"><!-- Aqui va el titulo de la pagina modal -->@yield('modal_title')</h4>
                    </div>
                    <div class="modal-body">
                         @yield('modal_body')
                        <div class="alert hidden" id="modal-alert"></div>
                        <!--Aqui va el cuerpo de la página modal -->


                    </div>
                    <div class="modal-footer">
                    <!-- Aquí va el pie de la pagina modal -->
                    @yield('modal_footer')
                    </div>
                </div>
            </div>
        </div>

同Dom。我得到标题，body，模态的页脚

 var modalBox = $("#box-modal"),
        modalBoxObject = modalBox[0],
        modaltitle = modalBoxObject.getElementsByClassName('modal-title')[0],
        modalContent = modalBoxObject.getElementsByClassName('modal-body')[0],
        modalFooter = modalBoxObject.getElementsByClassName('modal-footer')[0];

我想创建不同的 object 模式并赋予它不同的内容。

示例：如果我按事件创建用户，我将标题设为 modal-title

如果我有其他事件显示用户。我已经编辑了标题，但没有覆盖创建用户的标题；

例子

$("#create").on('click', function(event)
   {
       event.preventDefault();
       modaltitle.innerHTML = "Create user";

   });
   $("#modify").on('click', function(event)
   {
       event.preventDefault();
       //this overwrite my DOM. I want to have differents modal windows with differents title example.
       modaltitle.innerHTML = "Modify";

   });

有什么例子吗？我创建了一个 class。或者我为 "showuser" 创建了其他 window 模式，为 "create user"

创建了不同的模式

Answer 1

要实现这一点，您应该参考 official documentation 并按照以下步骤操作：

使用自定义按钮作为触发器 data attribute :

<button data-toggle="modal" data-target="#box-modal" 
     class="btn btn-primary" data-action="view">View</button>

创建事件处理程序并检索打开模式的相关按钮：

$('#box-modal').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget);
    console.log(event);
    var action = button.data('action');

    var modal_title = $(this).find('.modal-title');
    var modal_body = $(this).find('.modal-body');
    var modal_footer = $(this).find('.modal-footer');

    switch(action) {
        //Test each case
    }
})

jsFiddle

在不覆盖的情况下创建 object DOM 推特引导模式

Create object DOM twitter boostrap modal without overwrite

javascript

object

twitter-bootstrap-3