Javascript Laravel-如何重用模态代码并根据按钮单击打开不同的模态

因此，我有几个按钮，打开相同的模式，但不同的内容。我不想每次需要打开新模型时都复制/粘贴模式代码。我想使用相同的模式代码，并根据点击的按钮在模式中加载不同的内容。我该怎么做？ 这是我的模式代码：

<div class="dialogs-holder">
    <div class="dialog new_file">
        <div class="dialog-header clearfix">
            <a class="flaticon stroke maximize-4" href="/"></a>
            <div class="dialog-title"><span class="gray-bckg">{{ //different according to button }}</span></div>
            <div class="flaticon stroke x-1"></div>
        </div>
        <div class="dialog-content clearfix">
            @include('includes.modals.' . //different template according to button )
        </div>
    </div>
</div>

{{//根据按钮不同}
@include（'includes.modals.//根据按钮不同的模板）

---

我怎样才能做到这一点呢？

您必须使用javascript才能做到这一点

首先，单击按钮时，您必须处理每个事件。然后，您可以使用javascript动态地将内容设置为modal的标题和内容

例如

---

遵循以下步骤，您将获得接近您要求的输出。

第1步。在Routes.php中创建如下路由

第2步。在Testcontroller.php中使用下面的代码设置Testcontroller

第3步。设置模型主体内容视图。在参考资料/test/model.blade.php中

第4步。在任何视图文件中设置bello代码。

&时代；
情态标题
...
接近
保存更改
$（“#myModal”）。on（“show.bs.modal”，函数（e）{
var link=$（e.relatedTarget）；
$（this.find（“.modal body”）.load（link.attr（“href”））；
});

这是一个迟来的答案，适用于拉威尔，但可能会引起某些人的兴趣

我创建了一个

modal.blade.php

<div id="{{ $id or 'modal' }}" class="modal fade" role="dialog">                
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <!-- Modal content-->
            <div class="modal-content">

                <div class="modal-header text-center">
                    <h2>{{ $title }}</h2>
                </div>

                <div class="modal-body">
                    <div class="panel-body"></div>                              
                </div>

            </div>                    
        </div>
    </div>                
</div>

当需要这种行为时，我将更新与ajax的模态联系

<a  href=""
data-endpoint="{{ route('tasks.show' , ['tasks' => $task->id]) }}" 
data-target="task-show .modal-content .panel-body"
data-modal="task-show"
data-cache="false"
data-async="true"
data-toggle="modal" >{{ $task->name }}</a>

Route::get('test_model1',['as'=>'test_model1', 'uses'=>'TestController@test_model1']);
Route::get('test_model2',['as'=>'test_model2', 'uses'=>'TestController@test_model2']);

class TestController extends Controller {

        public  $param=array();

        public function __construct(){
            //$this->middleware('auth');
        }

        public function test_model1(){
            $this->param['content']="Model 1 body.";
            return view('test.model',$this->param);
        }

        public function test_model2(){
            $this->param['content']="Model 2 body.";
            return view('test.model',$this->param);
        }
    }

<div class="row">
    <div class="col-xs-12">
        <p><?php echo $content; ?></p>
    </div>
</div>

<a href="<?php echo route('test_model1'); ?>" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-primary">
        Launch Modal 1
    </a>
    <a href="<?php echo route('test_model2'); ?>" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-danger">
        Launch Modal 2
    </a>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $("#myModal").on("show.bs.modal", function(e) {
            var link = $(e.relatedTarget);
            $(this).find(".modal-body").load(link.attr("href"));
        });
    </script>

<div id="{{ $id or 'modal' }}" class="modal fade" role="dialog">                
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <!-- Modal content-->
            <div class="modal-content">

                <div class="modal-header text-center">
                    <h2>{{ $title }}</h2>
                </div>

                <div class="modal-body">
                    <div class="panel-body"></div>                              
                </div>

            </div>                    
        </div>
    </div>                
</div>

@component('whereyourmodalisplaced.modal', [
    'id' => 'task-show', //If you use multi modal on same page, always use ID
    'title' => 'Edit a task'])
@endcomponent

<a  href=""
data-endpoint="{{ route('tasks.show' , ['tasks' => $task->id]) }}" 
data-target="task-show .modal-content .panel-body"
data-modal="task-show"
data-cache="false"
data-async="true"
data-toggle="modal" >{{ $task->name }}</a>

$('body').on('click', 'a[data-async="true"]', function(e)
{
    e.preventDefault();
    var self = $(this),
        url = self.data('endpoint'),
        target = self.data('target'),                
        modal = self.data('modal');

    $.ajax({
        url: url,
        type: self.data('method'),
        cache : self.data('cache'),
        success: function(data)
        { 
           if (target !== 'undefined'){ $('#'+target).html( data ); }
           if (modal !== 'undefined'){ $('#'+modal).modal( 'show' ); }
        }
    });
});