jQuery всплывающее содержимое отображается на странице, и всплывающее окно не отображается

Я пробовал официальное всплывающее окно jQuery Mobile, а теперь также попытался Magnific Всплывающий плагин, и все они отображают содержимое всплывающего окна на моей странице, а не скрывая его и показывая его позже в модальном.jQuery всплывающее содержимое отображается на странице, и всплывающее окно не отображается

index.php:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <link rel="stylesheet" type="text/css" href="magnific.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script src="magnific.js"></script> 

    <script src="moment.js"></script> 
    <script src="livestamp.min.js"></script> 
    <script src="main.js"></script> 


</head> 

<body> 

<div class="wrapper"> 

    <!-- Like so: --> 
<a href="#test-popup" class="open-popup-link">Show inline popup</a> 

<!-- Or like so: --> 
<a href="mobile-friendly-page.html" data-mfp-src="#test-popup" class="open-popup-link">Show inline popup</a> 

<!-- Popup itself --> 
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">You may put any HTML here. This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</div>

main.js:

$(document).ready(function() { 
    $('.open-popup-link').magnificPopup({ 
    type:'inline', 
    midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href. 
}); 
});

По какой-то странной причине, всплывающие окна не отображаются, а вместо этого я вижу, что это содержание на index.php. Результатом этого получилось jQuery-Mobile Popup. Что я делаю не так?

источник

2016-09-22 Ricardo

@ Riccardo похоже, что есть несколько вещей, которые нужно исправить здесь.

Во-первых, вы не включили скрипт jQuery Mobile. Если вы ссылаетесь на Google принимала библиотеки, то вам необходимо включить:

<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

Кроме того, теперь, что вы в том числе JQuery Mobile, последнюю версию ядра JQuery, который поддерживает JQuery Mobile (в настоящее время) является 2.1, (в настоящее время вы ссылаетесь на 3.1). На Hosted библиотеке Google это:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Вы также тогда нужно в CSS страницы JQuery Mobile:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">

Теперь, когда вы получили ваши библиотеки все загружены, мы можем получить по ссылке, которая открывает всплывающее окно. После демонстрации jQuery Mobile here вам нужно добавить data-rel="popup" в ссылку, которая открывает всплывающее окно. Что делает вашу ссылку:

<a href="#test-popup" data-rel="popup">Show inline popup</a>

Кроме того, структура страницы JQuery Mobile диктует, что содержание таких как ссылки выше вкладываться в DIV с role="main" class="ui-content", который сам, если вложен в DIV с `данных-роли =«страница»:

<div data-role="page"> 
    <div role="main" class="ui-content"> 
     <!-- Like so: --> 
     <a href="#test-popup" data-rel="popup">Show inline popup</a> 
    </div> 
</div>

Наконец само всплывающее окно должно иметь атрибут data-role="popup", включенный в div тег:

<div id="test-popup" data-role="popup">Popup content</div>

Аналогично ссылке выше, всплывающее окно div должно быть вложено на странице div, но в отличие от ссылки (которая является обычным контентом) всплывающее окно обрабатывается специально, поскольку оно не является содержимым, которое вы обычно хотите видеть; только тогда, когда это называется, так он сидит за пределами «содержание» div следующим образом:

<div data-role="page"> 
    <div role="main" class="ui-content"> 
     <!-- Like so: --> 
     <a href="#test-popup" data-rel="popup">Show inline popup</a> 
    </div> 
    <!-- Popup itself --> 
    <div id="test-popup" data-role="popup">Popup content</div> 
</div>

Так положить все это вместе, вы должны иметь в вас index.php:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> 

</head> 

<body> 

<div data-role="page"> 
    <div role="main" class="ui-content"> 
     <!-- Like so: --> 
     <a href="#test-popup" data-rel="popup">Show inline popup</a> 
    </div> 
    <!-- Popup itself --> 
    <div id="test-popup" data-role="popup">Popup content</div> 
</div> 

</body>

Вы также можете получить избавиться от любого пользовательского javascript, который вы написали, чтобы показать это всплывающее окно, поскольку оно все находится в сценариях jQuery и jQuery Mobile.

Посмотрите еще раз на странице демонстрационных демонстраций jQuery для всплывающих окон here для дальнейшего выбора стиля.

Here's a JSFiddle with this example all working. Удачи вам в вашем проекте!

источник

2016-10-05 10:27:22 Brad

Благодарим вас за подробный ответ, проверьте его, когда я получу свободное время и сообщит вам, если это сработает. – Ricardo

jQuery всплывающее содержимое отображается на странице, и всплывающее окно не отображается

ответ

Смежные вопросы