javascript - How to open data-url on modal clicking by anchor?

Actually it's opening after second click but I want to open it first click I guess it can be possible with jquery event. so why I added data-target and data-toggle with jquery ? because if my data-title is blank I will open my link on new tab but if my data-title is pop than I wil open it with bootstrap modal that's why I'm trying to add with 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/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="" data-title="pop"><img src=""></a>
      </div>
      <div class="item">
        <a href=""><img src="" data-title="blank"></a>
      </div>
      <div class="item">
        <a href="" data-title="pop"><img src=""></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/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn/bootstrap/3.3.4/js/bootstrap.min.js"></script>

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./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..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..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..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./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn./bootstrap/3.3.4/js/bootstrap.min.js"></script>

Share Improve this question edited Apr 18, 2017 at 10:49 asked Apr 18, 2017 at 10:41 ani_css 2,1263 gold badges33 silver badges77 bronze badges

If it's opening after second click, propably there is something undefined at first time. – Zydnar Commented Apr 18, 2017 at 10:47
I don't know maybe – ani_css Commented Apr 18, 2017 at 10:50
Try opening directly with code instead of setting the attributes. – inarilo Commented Apr 18, 2017 at 10:51
it work's than but I have to use with attribute because if my value of attribute is pop than open it with modal or if blank than open with new tab – ani_css Commented Apr 18, 2017 at 10:56
1 It will obviously work on second click, because your function is only adding attrs which will bind modal function, and then on second click it will run bootstraps predefined function. – Abhishek Pandey Commented Apr 18, 2017 at 11:00

| Show 1 more ment

5 Answers 5

Sorted by: Reset to default 5

It is working the way it supposed to work, because your function is only adding attrs which will bind modal(), and then on second click it will run bootstraps predefined function.

The better way is to run modal() at the end of your function,

Adding $('#carouselModal').modal('show'); at end of the if condition will work.

$(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./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..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..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..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./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn./bootstrap/3.3.4/js/bootstrap.min.js"></script>

You are setting the attributes but the updated code will work on click

Example

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

click event should be triggered in order to see changes.

You should dispatch click event after assign new data attribute:

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

    $(this).click();

    return false;
}

$(this).data('target') == undefined needs to prevent eternal loop

Try this, it works,

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 {

}

change your script to this.

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

});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to open data-url on modal clicking by anchor? - Stack Overflow

5 Answers 5

Example

与本文相关的文章

评论列表(0)