Question

你能帮我解决这个问题，

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

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

当您点击此链接时，您将被定向到https://www.example/nexpageform。我希望访问者留在这个页面上，当你点击按钮时你得到模态，在那个模态中你可以从下一页获得数据。

对我来说重要的是，这只需要在桌面上运行，因此移动设备和平板电脑有旧选项，只有桌面有模态。

1）我对此方法感到困惑，因为我需要在桌面和小型设备上使用模态，我需要重定向到另一个页面。

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

谢谢

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

桌面上的模态

1 个答案: