Question

实际上它在第二次点击后打开但是我想先点击打开它我觉得可以用jquery事件。那么为什么我用jquery添加data-target和数据切换？因为如果我的data-title是blank，我会在新标签上打开我的链接，但是如果我的data-title是弹出的，那么我将使用bootstrap模式打开它，这就是我尝试使用jquery添加的原因

please click to see on codepen

$(document).on("click", "a[data-title]", function() {

  var target = $(this).data("title");

  var targetLink = $(this).attr("href");
  if (target == "pop") {
    $(this).attr({
      'data-target': '#carouselModal',
      'data-toggle': 'modal',
    });
    return false;
  } else if (target == "blank") {
    window.open(targetLink, '_blank');
    return false;
  } else {

  }

});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">


  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <a href="http://www.anitur.com.tr/popup/test-8-content" data-title="pop"><img src="https://unsplash.it/1400/600?image=114"></a>
      </div>
      <div class="item">
        <a href="http://www.anitur.com.tr/popup/test-5-us"><img src="https://unsplash.it/1400/600?image=315" data-title="blank"></a>
      </div>
      <div class="item">
        <a href="http://www.anitur.com.tr/popup/test-2-posts" data-title="pop"><img src="https://unsplash.it/1400/600?image=622"></a>
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</div>

<div class="modal fade" id="carouselModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Kapat</span></button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- carousel modal-->

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Answer 1

它正在以它应该工作的方式工作，因为你的函数只添加了attrs，它将绑定modal()，然后在第二次点击它将运行bootstraps预定义函数。

更好的方法是在功能结束时运行modal()，

在if条件结束时添加$('#carouselModal').modal('show');将起作用。

$(document).on("click", "a[data-title]", function() {

  var target = $(this).data("title");

  var targetLink = $(this).attr("href");
  if (target == "pop") {
    $(this).attr({
      'data-target': '#carouselModal',
      'data-toggle': 'modal',
    });
    $('#carouselModal .modal-body').html('<a href='+targetLink+'>'+targetLink+'</a>');
    $('#carouselModal').modal('show');
    return false;
  } else if (target == "blank") {
    window.open(targetLink, '_blank');
    return false;
  } else {

  }

});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">


  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <a href="http://www.anitur.com.tr/popup/test-8-content" data-title="pop"><img src="https://unsplash.it/1400/600?image=114"></a>
      </div>
      <div class="item">
        <a href="http://www.anitur.com.tr/popup/test-5-us"><img src="https://unsplash.it/1400/600?image=315" data-title="blank"></a>
      </div>
      <div class="item">
        <a href="http://www.anitur.com.tr/popup/test-2-posts" data-title="pop"><img src="https://unsplash.it/1400/600?image=622"></a>
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</div>

<div class="modal fade" id="carouselModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Kapat</span></button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- carousel modal-->

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Answer 2

您正在设置属性，但更新的代码将适用于click

实施例

$(this).attr('data-target', 'newModelID'); // and whatever

应该触发

click事件以查看更改。

Answer 3

您应该在分配新数据属性后发送点击事件：

 if(target=="pop" && $(this).data('target') == undefined) {
    $(this).attr({
        'data-target':'#carouselModal',
        'data-toggle':'modal',
    });

    $(this).click();

    return false;
}

$(this).data('target') == undefined需要阻止永恒循环

Answer 4

试试这个，它有效，

var target = $(this).data("title");

if(target=="pop") {

    $(this).attr({
        'data-target':'#carouselModal',
        'data-toggle':'modal',
    });

    $('#carouselModal').modal('show');

    return;

}else if(target=="blank"){

  window.open(targetLink,'_blank');

    return;

} else {

}

Answer 5

将您的脚本更改为此。

$(document).on("click", "a[data-title]", function() {
 var target = $(this).data("title");
 var targetLink = $(this).attr("href");

 if (target == "pop") 
 {
    $(".modal-body").load(targetLink);
    $('#carouselModal').modal('toggle');
    return false;
 } 
 else if (target == "blank")
 {
  window.open(targetLink, '_blank');
  return false;
 }

});

如何通过锚点打开模态点击数据网址？

5 个答案:

实施例