Question

我想为一些函数使用一个Bootstrap模式，应该通过单击按钮/链接动态加载（参见示例）。由于某种原因，属性（data-mTitle＆amp; data-mParams）将不会加载。具有标准属性喜欢href，id，class等，它完美无缺。

正如我所说，我想只为一个目的使用一个Modal（HTML）和一个JS函数（作为通用解决方案）。知道我做错了吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

您可以在this answer中找到原因。

基本上，当你写：

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

jQuery正在寻找：

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

顺便说一下，即使在这里使用.attr()并没有错，相反，您应该使用专门用于处理数据属性的.data()。

具有单个属性的Bootstrap Modal

1 个答案: