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

Question

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

<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>

我怎么能这么做？

Answer 1

遵循下面的步骤，您将得到接近您的需求的输出。

步骤1.在routes.php中创建像bellow这样的路由

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

步骤2.在Testcontroller.php中使用下面的代码安装测试控制器

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);
        }
    }

步骤3.设置模型体内容视图。在resources/test/model.blade.php中

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

步骤4.在任何视图文件中设置bello代码.

<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>

Answer 2

您必须使用javascript来做到这一点。

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

例如：

 // give the id to title tag of modal
 <span class="gray-bckg" id="modal_title"></span>
 //give the id to content tag of modal
 <div class="dialog-content clearfix" id="content"></div>

现在添加脚本

 //with script
 $("#button1").on("click",function(e){
      $("#content").val("this is button1 content");
      $(".modal").open();
 });
 $("#button2").on("click",function(e){
      $("#content").val("this is button2 content");
      $(".modal").open();
 });

Answer 3

这是一个很晚的答案，并改编为拉拉维尔，但它可能会感兴趣的人。

我创建了一个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>

现在，当我想弹出一个模式时，我用这个

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

我正在用这种行为在需要时用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>

并确保代码中始终有这样的内容。

$('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' ); }
        }
    });
});