具有各个属性的Bootstrap模式 [英] Bootstrap Modal with individual attributes

问题描述

我想对多个功能使用一个Bootstrap Modal，应该通过单击按钮/链接来动态加载该功能(请参见示例). 由于某些原因，属性(data-mTitle和data-mParams)将不会加载.具有标准属性 例如href，id，class等.它可以完美运行.

I would like to use one Bootstrap Modal for several functions, which should be loaded dynamically by clicking on a button / link (see example). For some reason the attributes (data-mTitle & data-mParams) will not load. With the standard attributes like href, id, class etc. it works flawlessly.

正如我所说，我只想出于所有目的使用一种Modal(HTML)和一个JS函数(作为一种通用解决方案).知道我在做什么错吗?

As I said, I would like to use only one Modal (HTML) and one JS function for all purposes (as an universal solution). Any idea what I am doing wrong?

$(document).ready(function(){
  
  $('#myModal').on('shown.bs.modal', function () {
    	  
        var $modal = $(this),
		modal_title = $(this).data('modal-title'),
		modal_params = $(this).data('modal-params');

        if(typeof modal_title !== typeof undefined && modal_title !== false) {
            title = modal_title;
        }
        else{
            title = 'My Title';
            }

        $.ajax({
            cache: false,
            type: 'POST',
            url: '/ajax.php',
            data: modal_params,
            success: function(data) {
                $modal.find('.modal-title').html(title);
                $modal.find('.modal-body').html(data);
            }
        });
    });
  
  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<a href="" data-toggle="modal" data-target="#myModal" data-modal-title="abcd Title" data-modal-params="a=b">Link 1</a>
<a href="" data-toggle="modal" data-target="#myModal" data-modal-title="efgh Title" data-modal-params="c=d">Link 2</a>

<div class="modal hide fade" id="myModal">
<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">×</span></button>
<h4 class="modal-title">Loading title...</h4>
</div>
<div class="modal-body">
Loading content...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

推荐答案

您必须在属性名称中仅使用小写字母.

You must use only lower-case letters in your attribute names.

您可以在 此答案 中找到原因.

You can find the reason in this answer.

基本上，在您撰写时:

$(this).attr('data-mTitle')

jQuery正在寻找这个:

jQuery is looking for this:

<a data-m-title="Title"></a>

顺便说一句，即使使用 .attr()也没什么问题在这里，您应该使用> .data() 专门用于处理数据属性.

By the way, even though there's nothing wrong with using .attr() here, instead you should use .data() that is specifically meant for working with data attributes.

这篇关于具有各个属性的Bootstrap模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！