堆栈内存溢出
  简体   繁体   English

如何将模态 window jQuery 重写为本机 Javascript？

[英]How can I rewrite modal window jQuery into native Javascript?

 原文  2020-12-10 10:46:09  5   1    javascript/ jquery/ popup

问题描述

How can I rewrite this jQuery code for modal windows into native Javascript?如何将模态 windows 的 jQuery 代码重写为本机 Javascript？ It's important to save and using data attributes.保存和使用数据属性很重要。

I can't write code using forEach and getAttribute together.我不能一起使用 forEach 和 getAttribute 编写代码。 I always write a code using jQuery and now I must write using native JavaScript.我总是使用 jQuery 编写代码，现在我必须使用本机 JavaScript 编写代码。 

 $('[data-modal]').click(function () { var target = $(this).attr('data-modal'); if (target == 'close') $('.modal-container').removeClass('active'); else $('.modal-container' + target).addClass('active'); });
 body { padding: 50px; }.btn-group.btn { display: inline-block; padding: 10px 20px; background-color: #2980b9; color: #fff; cursor: pointer; user-select: none; -webkit-user-select: none; -moz-user-select: none; }.modal-container { position: fixed; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; visibility: hidden; transition: all 0.3s ease; }.modal-container.active { opacity: 1; visibility: visible; }.modal-container.overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 1; }.modal-container.modal { position: relative; z-index: 2; background-color: #fff; padding: 30px; border-radius: 3px; max-width: 600px; margin: 50px auto; }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="css/style,css"> <title>Modal example</title> </head> <body> <div class="page-content"> <div class="btn-group"> <a class="btn" data-modal="#m1">Open modal 1</a> <a class="btn" data-modal="#m2">Open modal 2</a> <a class="btn" data-modal="#m3">Open modal 3</a> </div> </div> <div id="m1" class="modal-container"> <div class="overlay" data-modal="close"></div> <div class="modal"> <h2>Modal window title</h2> <p>1 Lorem. ipsum dolor sit amet consectetur adipisicing elit, Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero. aliquid voluptas perferendis, Eius, tenetur.</p> <button data-modal="close">Close window</button> </div> </div> <div id="m2" class="modal-container"> <div class="overlay" data-modal="close"></div> <div class="modal"> <h2>Modal window title</h2> <p>2 Lorem, ipsum dolor sit amet consectetur adipisicing elit, Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique. magni facere quam aperiam quos quisquam atque vero, aliquid voluptas perferendis, Eius. tenetur,</p> <button data-modal="close">Close window</button> </div> </div> <div id="m3" class="modal-container"> <div class="overlay" data-modal="close"></div> <div class="modal"> <h2>Modal window title</h2> <p>3 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero: aliquid voluptas perferendis. Eius. tenetur.</p> <button data-modal="close">Close window</button> </div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/main.js"></script> </body> </html>

I will be very grateful for your help!我将非常感谢您的帮助！

1 个解决方案

解决方案1
 0 已采纳  2020-12-10 11:02:54

Have a go with this有一个 go 这个

document.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("btn")) {
    document.querySelector(tgt.dataset.modal).classList.add('active')
  } else if (tgt.classList.contains("overlay") || tgt.classList.contains("close")) {
    tgt.closest('.modal-container').classList.remove('active')
  }
});


 document.addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("btn")) { document.querySelector(tgt.dataset.modal).classList.add('active') } else if (tgt.classList.contains("overlay") || tgt.classList.contains("close")) { tgt.closest('.modal-container').classList.remove('active') } });
 body { padding: 50px; }.btn-group.btn { display: inline-block; padding: 10px 20px; background-color: #2980b9; color: #fff; cursor: pointer; user-select: none; -webkit-user-select: none; -moz-user-select: none; }.modal-container { position: fixed; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; visibility: hidden; transition: all 0.3s ease; }.modal-container.active { opacity: 1; visibility: visible; }.modal-container.overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 1; }.modal-container.modal { position: relative; z-index: 2; background-color: #fff; padding: 30px; border-radius: 3px; max-width: 600px; margin: 50px auto; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="page-content"> <div class="btn-group"> <a class="btn" data-modal="#m1">Open modal 1</a> <a class="btn" data-modal="#m2">Open modal 2</a> <a class="btn" data-modal="#m3">Open modal 3</a> </div> </div> <div id="m1" class="modal-container"> <div class="overlay" data-modal="close"></div> <div class="modal"> <p>1 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero, aliquid voluptas perferendis. Eius, tenetur,</p><button class="close" data-modal="close">Close window</button> </div> </div> <div id="m2" class="modal-container"> <div class="overlay" data-modal="close"></div> <div class="modal"> <p>2 Lorem. ipsum dolor sit amet consectetur adipisicing elit, Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique, magni facere quam aperiam quos quisquam atque vero. aliquid voluptas perferendis, Eius, tenetur.</p><button class="close" data-modal="close">Close window</button> </div> </div> <div id="m3" class="modal-container"> <div class="overlay" data-modal="close"></div> <div class="modal"> <p>3 Lorem, ipsum dolor sit amet consectetur adipisicing elit, Cupiditate ab praesentium itaque temporibus beatae nobis impedit similique. magni facere quam aperiam quos quisquam atque vero, aliquid voluptas perferendis. Eius, tenetur!</p><button class="close" data-modal="close">Close window</button> </div> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将此 jQuery 代码重写为 Javascript？ - How can I rewrite this jQuery code into Javascript? 如何使用javascript或jquery中的滚动条打开“模态对话框”窗口 - How can I open a Modal-Dialog window with scrollbars in javascript or jquery 在jQuery中重写本机javascript - rewrite native javascript in jQuery 如何用JavaScript或jQuery和正则表达式重写链接？ - How can I rewrite links with JavaScript or jQuery and a regular expression? 如何在不使用JavaScript的情况下使用JQuery库来重写它？ - How can I rewrite this without using JQuery library just with JavaScript? 如何通过javascript / jquery函数调用bootstrap上的modal - how can i call modal on bootstrap via javascript/jquery function 如何打印模态窗口的内容？ - How can i print the content of the Modal window? 如何在Dom中引用模态窗口？ - How can i refer to a Modal Window in Dom? 如何在模式窗口中加载tinymce 4？ - how can I load tinymce 4 in modal window? 模态窗口：如何为每个模态设置不同的内容？ - Modal Window: How can I set a different content for each modal?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM