如何使用append()和jQuery ()正确地打开和关闭一个模式？

Question

我有三个缩略图和一些文字。点击缩略图将打开一个模式。我需要

1)使用append()添加模态；

2)添加一个"X“来关闭该模式(可以单独添加附加项，我只是在1行代码中添加了它)。关闭模态需要使用remove()；

3)模态应能重新打开。

导师给出了我们必须使用的下面一段代码

$( ".thumb" ).click(function(event) {
    event.preventDefault(); // stops the default action of an element from happening
    if ($(this).hasClass( 'open' )) {
        $(this).removeClass('open');
        // js when modal is closed 
    } else {
        $(this).addClass('open');
        // js when modal is open 
    }});

这是我试过的密码。完全有缺陷，我不知道该怎么做，因为我是jQuery的新手。

<div id="wrapper">
    <a href="#" id="thumb-1" class="thumb">
      <img src="img/turtle.png" alt="turtle">  
        <div class="bottom-content">
            <h2>Consectetur Amet Ligula Bibendum</h2>
            <p> Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </a>
    <a href="#" id="thumb-2" class="thumb">
        <img src="img/reef2.png" alt ="reef"> 
        <div class="bottom-content">
            <h2>Amet Bibendum Ridiculus Sit</h2>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </a>
    <a href="#" id="thumb-3" class="thumb">
        <img src="img/reef.png" alt="more reef"> 
        <div class="bottom-content">
            <h2>Euismod Ridiculus</h2>
            <p>Cum sociis natoque penatibus et magnis. </p>
        </div>
    </a>
</div>

CSS

.modal {
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    animation-name: openmodal;
    animation-duration: 0.3s;
    display: none;
}

.open {
    display: block;
}

.modal-content {
    background-color: #FFFFFF;
    margin: 1% auto;
/*    padding: 20px;*/
    width: 550px;
    height: 722px;
    color: black;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.4);
}

.close-modal{ 
    float: right;
    font-size: 4em;
    padding-right: 20px;
    color: white;
    animation-duration: 0.3s;
}

.close-modal:hover {
    color: #000;
    cursor: pointer;
}

我在jQuery上的尝试

     $('#wrapper').append('<div class="modal"> <div class="modal-content"> <span class="close- 
      modal">&times;</span> </div> </div>');

    $('.close-modal').on('click', function() {
        $('.modal').remove();       
    })

$(".thumb" ).click(function(event) {
    event.preventDefault(); 
    if ($('.modal').hasClass('open')) {
        $('.modal').removeClass('open');

    } else {
        $('.modal').addClass('open');
    }});

});

还有人能告诉我，我的$(".thumb" ).click(function(event) {...方法是否做得很好，还是也必须完全不同？

Answer 1

我做了一些改变。

1. 您的JavaScript有一个额外的结束大括号和括号，所以我删除了那些。
2. 我没有在加载时添加模态HTML，而是更改了逻辑，以便按需添加。
3. 为了使close按钮继续工作，我更改了click事件，以便它在声明click事件时不依赖于DOM中存在的元素。
4. 我在height/width中评论了.modal-content。
5. 我把你的span关闭按钮变成了一个HTML按钮。这是一个可访问性的改进。还要注意aria-label的使用，这样屏幕阅读器就可以理解按钮应该做什么。
6. 最后，为了提高可读性，我将HTML创建更改为ES6字符串文本。

无障碍问题：

1. 用href="#"将缩略图链接更改为button。按钮可执行任务；链接可供选择。
2. 为转义键添加一个键盘事件监听器，如果该模式被打开，它将关闭该模式。这也是一个令人关切的无障碍问题。

​

function addModal() {
  $('#wrapper').append(`
  <div class="modal">
    <div class="modal-content"> 
      <button class="close-modal">&times;</button>
    </div> 
  </div>
  `);
}

$('body').on('click', '.close-modal', function() {
  $('.modal').remove();
})

$(".thumb").click(function(event) {
  if (!$('.modal').length) {
    addModal();
  }
  event.preventDefault();
  if ($('.modal').hasClass('open')) {
    $('.modal').removeClass('open');

  } else {
    $('.modal').addClass('open');
  }
});

.modal {
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  animation-name: openmodal;
  animation-duration: 0.3s;
  display: none;
}

.open {
  display: block;
}

.modal-content {
  background-color: #FFFFFF;
  margin: 1% auto;
  /* padding: 20px; */
  /*   
  width: 550px;
  height: 722px; 
  */
  color: black;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.4);
}

.close-modal {
  float: right;
  font-size: 4em;
  padding-right: 20px;
  color: white;
  animation-duration: 0.3s;
  -webkit-appearance: none;
  background-color: transparent;
  appearance: none;
  border: none;
}

.close-modal:hover {
  color: #000;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <a href="#" id="thumb-1" class="thumb">
    <img src="img/turtle.png" alt="turtle">
    <div class="bottom-content">
      <h2>Consectetur Amet Ligula Bibendum</h2>
      <p> Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
  </a>
  <a href="#" id="thumb-2" class="thumb">
    <img src="img/reef2.png" alt="reef">
    <div class="bottom-content">
      <h2>Amet Bibendum Ridiculus Sit</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </a>
  <a href="#" id="thumb-3" class="thumb">
    <img src="img/reef.png" alt="more reef">
    <div class="bottom-content">
      <h2>Euismod Ridiculus</h2>
      <p>Cum sociis natoque penatibus et magnis. </p>
    </div>
  </a>
</div>

​

jsFiddle

Answer 2

您可以考虑使用jQuery UI对话框。它有一个模态功能和一个小的调整，你可以主题它像一个花哨的盒子。它已经有了很多你想要的功能。

示例：https://jsfiddle.net/Twisty/1hus9vcn/

<div id="wrapper">
  <a href="#" id="thumb-1" class="thumb">
    <img src="img/turtle.png" alt="turtle">
    <div class="bottom-content">
      <h2>Consectetur Amet Ligula Bibendum</h2>
      <p> Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
  </a>
  <a href="#" id="thumb-2" class="thumb">
    <img src="img/reef2.png" alt="reef">
    <div class="bottom-content">
      <h2>Amet Bibendum Ridiculus Sit</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </a>
  <a href="#" id="thumb-3" class="thumb">
    <img src="img/reef.png" alt="more reef">
    <div class="bottom-content">
      <h2>Euismod Ridiculus</h2>
      <p>Cum sociis natoque penatibus et magnis. </p>
    </div>
  </a>
</div>

CSS

.pale {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}

.clear {
  background: transparent;
}

.no-show {
  display: none;
}

JavaScript

$(function() {
  function makeModal(cnt, t) {
    var dlg = $("<div>", {
      title: t
    }).html(cnt);
    dlg.dialog({
      classes: {
        "ui-dialog": "clear",
        "ui-dialog-titlebar": "pale",
        "ui-dialog-content": "clear",
        "ui-dialog-buttonpane": "no-show",
        "ui-dialog-buttonset": "no-show"
      },
      resizable: false,
      modal: true,
      width: 550,
      height: 722,
      show: {
        effect: "fade",
        duration: 300
      },
      close: function(e, ui) {
        $(this).dialog("destroy");
      }
    });
  }

  $(".thumb").click(function(e) {
    e.preventDefault();
    var i = $(this).find("img");
    makeModal(i.prop("outerHTML"), i.attr("alt"));
  })
});

见更多：

• https://jqueryui.com/dialog/#modal-confirmation
• https://api.jqueryui.com/theming/css-framework/