桌面上的模态

Question

你能帮我吗，

我在电子商务网站上工作，所以在购物车页面中有一个 link、

<a href="https://www.example/nexpageform" title="">BUTTON LINK</a>

目前，当您点击此 link 时，您将被引导至 https://www.example/nexpageform。我希望访问者留在此页面上，当您单击按钮时，您会看到模态，在该模态中，您会从下一页获取数据。

对我来说重要的是，这只需要运行在桌面上，所以手机和平板电脑有旧选项，只有桌面有模态。

1) 我对这种方法感到困惑，因为我需要在桌面上使用模式，而在较小的设备上我需要重定向到另一个页面。

如果有人能告诉我正确的方法或方法，我将不胜感激。

谢谢

Answer 1

您可以创建两个具有不同类或 ID 的锚标记，并根据 CSS 媒体查询显示它们。

$(document).ready(function(){
  $('.desktop-only-link').on('click', function(e){
    e.preventDefault();
    
    $('<div />')
      .append('<p>')
      .text('This is a dialog popup')
      .dialog({
        title: 'Your Title Here'
      });
  });
});

.mobile-only-link {
  display: none;
  color: red;
}

@media screen and (max-width: 480px) {
  .desktop-only-link {
    display: none;
  }
  .mobile-only-link {
    display: inline;
  }
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<a href="https://www.example/nexpageform" class="mobile-only-link">BUTTON LINK</a>
<a href="#" class="desktop-only-link">BUTTON LINK</a>

桌面上的模态

Modal on desktop

html

javascript

jquery

e-commerce