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

你必须使用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 2

这是一个迟到的答案，适用于Laravel，但它可能会引起某些人的兴趣。

我创建了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' ); }
        }
    });
});

Answer 3

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

步骤1.在routes.php中创建类似于下面的路线

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中的波纹管代码设置Testcontroller

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>

Laravel - 如何根据按钮点击

3 个答案: