Question

> <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<button id="open-popup">Open popup</button>

<div id="my-popup" class="mfp-hide white-popup">
  Inline popup
</div>
<style>
#open-popup {padding:20px}
.white-popup {
  position: relative;
  background: #FFF;
  padding: 40px;
  width: auto;
  max-width: 200px;
  margin: 20px auto;
  text-align: center;
}
</style>
<script type="text/javascript">
$('#open-popup').magnificPopup({
    items: [
      {
        src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg',
        title: 'Peter & Paul fortress in SPB'
      },
      {
        src: 'http://vimeo.com/123123',
        type: 'iframe' 
      },
      {
        src: $('<div class="white-popup">Dynamically created element</div>'), // Dynamically created element
        type: 'inline'
      },
      {
        src: '<div class="white-popup">Popup from HTML string</div>',
        type: 'inline'
      },
      {
        src: '#my-popup', 
       type: 'inline'
      }
    ],
    gallery: {
      enabled: true
    },
    type: 'image'
});
<script>
</body>
</html>

如何在点击时自动向右浮动徽标，并弹出一些信息。现在我使用了一个按钮，但我想使用一个徽标..那么我怎样才能放入图像而不是按钮，并且当点击该徽标图像时弹出也会出现。

Answer 1

要将图像用作弹出窗口的触发器，看起来您正在使用id＆＃34;打开弹出窗口。＆＃34 ;您可以删除按钮并添加图像或在按钮中放置图像（我喜欢按钮，但您必须采取措施 unstyle ） - 所以<a>标签 - 或者其他你喜欢+添加＆＃34;打开弹出窗口的id。＆＃34;

.. button id =＆＃34; open-popup ＆＃34;＆gt; ...

... $（＆＃39;＃的开弹出＆＃39）。magnificPopup（{...

至于在点击时移动徽标...你可以添加一个带有jQuery / JavaScript的类，该类可以做动画。

的jQuery

$('.element').on('click', function() { $(this).addClass('active'); // $(this) refers to the element clicked in this case });

样式

.element { transition: .5s; // set speed (look up other options) } .element.active { transform: translate(50%, 0); // random movement example }

有许多不同的弹出式/灯箱。如果magnificPopup不愉快，请尝试另一个。

单击时弹出信息会自动为徽标设置动画

1 个答案:

的jQuery

样式