jquery - 一起使用 jquery 和 jquery.mobile 时 CSS 不起作用

Question

在我的页面中，我使用 jquery(2.2.0) 和 jquery.mobile(1.4.5)。直到现在它都像一个魅力，但现在我正在尝试使用纯 CSS3 模式弹出窗口，但由于 jquery 库，它无法正常工作。如果我在页面中同时拥有这两个弹出窗口，则弹出窗口不起作用，但如果我删除其中一个，它就会开始正常工作。我试图调试正在发生的事情，但现在运气不好。

我正在发布代码，我希望任何人都可以帮助我。

<div>
    <div class="partnerLlistat">
        <a id="link2" href="#popup2">
            <div id="partnerBox2" class="partnerBox">
                <h3>Nom: aaa</h3>
                <p>Tipus de servei: aaa</p>
            </div>
        </a>

        <div id="popup2" class="overlay">
            <div class="inpopup2">
                <h3>Nom: aaa</h3>
                <a class="close" href="#">&times;</a>
                <h4>Entitat: aaa</h4>
                <p>Tipus de servei: aaa</p>
                    <p>Adreça: aaa</p>
                    <p>Telèfon: 111</p>
                    <p>Pàgina web: <a ref="external" target="_blank" href="http://aaa.net">http://aaa.net</a></p>
                    <p>Correu electrònic: aaa@gmail.com</p>
                    <p>Avantatge que ofereix: aaa aaa</p>
            </div>
        </div>

        <a id="link3" href="#popup3">
            <div id="partnerBox3" class="partnerBox">
                <h3>Nom: bbb bbb</h3>
                <p>Tipus de servei: bbb</p>
            </div>
        </a>

        <div id="popup3" class="overlay">
            <div class="inpopup3">
                <h3>Nom: bbb bbb</h3>
                <a class="close" href="#">&times;</a>
                <h4>Entitat: bbb</h4>
                <p>Tipus de servei: bbb</p>
                    <p>Adreça: bbb</p>
                    <p>Telèfon: 111</p>
                    <p>Pàgina web: <a ref="external" target="_blank" href="http://bbb.net">http://bbb.net</a></p>
                    <p>Correu electrònic: bbb@gmail.com</p>
                    <p>Avantatge que ofereix: bbb bbb</p>
            </div>
        </div>

        <a id="link4" href="#popup4">
            <div id="partnerBox4" class="partnerBox">
                <h3>Nom: ccc ccc</h3>
                <p>Tipus de servei: ccc</p>
            </div>
        </a>

        <div id="popup4" class="overlay">
            <div class="inpopup4">
                <h3>Nom: ccc ccc</h3>
                <a class="close" href="#">&times;</a>
                <h4>Entitat: ccc</h4>
                <p>Tipus de servei: ccc</p>
                    <p>Adreça: ccc</p>
                    <p>Telèfon: 111</p>
                    <p>Pàgina web: <a ref="external" target="_blank" href="http://ccc.net">http://ccc.net</a></p>
                    <p>Correu electrònic: ccc@gmail.com</p>
                    <p>Avantatge que ofereix: ccc ccc</p>
            </div>
        </div>

        <a id="link5" href="#popup5">
            <div id="partnerBox5" class="partnerBox">
                <h3>Nom: ddd ddd</h3>
                <p>Tipus de servei: ddd</p>
            </div>
        </a>

        <div id="popup5" class="overlay">
            <div class="inpopup5">
                <h3>Nom: ddd ddd</h3>
                <a class="close" href="#">&times;</a>
                <h4>Entitat: ddd</h4>
                <p>Tipus de servei: ddd</p>
                    <p>Adreça: ddd</p>
                    <p>Telèfon: 111</p>
                    <p>Pàgina web: <a ref="external" target="_blank" href="http://ddd.net">http://ddd.net</a></p>
                    <p>Correu electrònic: ddd@gmail.com</p>
                    <p>Avantatge que ofereix: ddd ddd</p>
            </div>
        </div>
    </div>
    <div style="height:125px"></div>
</div>

我不知道如何正确格式化 CSS 代码，所以在 jsfiddle 链接中检查它。

如您所见，在 jsfiddle 中工作正常，但因为我不知道如何正确插入库。最好的尝试方法是在您的计算机上进行。

check the code

Answer 1

好的。我找到了解决方案。有必要在 JQuery 和 JQuery.mobile 声明之间定义此脚本:

<script>
    // Preload configuration
    $( document ).on( "mobileinit", function() {
        $.mobile.autoInitializePage = false;
    });
</script>

这可以防止 JQuery.mobile 自动初始化任何东西。

另请注意，默认情况下，jQuery Mobile 会在元素上设置可见性:隐藏，因此您需要一个 CSS 规则来覆盖它:

body {
    visibility : visible !important;
}

我找到了解决方案 here .感谢 Jasper 在另一个线程中提供了解决方案。