Question

我创建了一个用链接替换特定单词的jquery，但是我想创建弹出的模式，有没有办法仅用jquery做到这一点？

这是我的代码

$(".wpb_wrapper, p").html(function(i, html) {
  return html.replace('lightweight', '<a href="ajax.html" rel="modal:open">example</a>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="wpb_wrapper">
  <p><strong>Notes:</strong><br> This is a 1 rep max testing week. Note down your max weight lifts.<br> After warming up with a lightweight barbel advance to your heaviest lift with as few sets as possible, performing 1 rep on each weight. A 1 rep max is
    an attempt for PR, push yourself and be persistent considering that you have 1 attempt to succeed on your max weight. If you think that a failed PR attempt is due to bad warm up, drop down to 60% and advance to your heaviest lift again.</p>
</div>
<div class="wpb_wrapper">
  This div barbel some text.
</div>
<div class="wpb_wrapper">
  This div contains some text.
</div>

Answer 1

像这样吗？

有关更详尽的示例，请查看https://stackoverflow.com/a/11090278/295783

$(".wpb_wrapper, p").html(function(i, html) {
  return html.replace('lightweight', '<a href="ajax.html" rel="modal:open">example</a>');
});

$(".wpb_wrapper").on("click", '[rel="modal:open"]', function(e) {
  e.preventDefault();
  e.stopPropagation(); // allow the click to keep the modal open
  $("." + $(this).text()).toggle();
});
$(document).on("click", function(e) { // click anywhere but link and modal
  $(".modal").hide();
});
$(".modal").on("click", function(e) {
  e.stopPropagation();
}); // allow a click on the modal

.example {
  display: none;
  position: absolute;
  top: 80px;
  left: 100px;
  border: 1px solid black;
  z-index: 1000;
  background-color: white
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="wpb_wrapper">
  <p><strong>Notes:</strong><br> This is a 1 rep max testing week. Note down your max weight lifts.<br> After warming up with a lightweight barbel advance to your heaviest lift with as few sets as possible, performing 1 rep on each weight. A 1 rep max is
    an attempt for PR, push yourself and be persistent considering that you have 1 attempt to succeed on your max weight. If you think that a failed PR attempt is due to bad warm up, drop down to 60% and advance to your heaviest lift again.</p>
</div>
<div class="wpb_wrapper">
  This div barbel some text.
</div>
<div class="wpb_wrapper example modal">
  <img src="https://cdn.pixabay.com/photo/2017/01/31/08/48/barbell-2023339_1280.png" width="200" />
</div>

用jQuery创建模态

1 个答案: