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

【问题标题】：CSS not working when using jquery and jquery.mobile together一起使用 jquery 和 jquery.mobile 时 CSS 不起作用
【发布时间】：2016-05-03 13:49:28
【问题描述】：

在我的页面中，我使用 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

【问题讨论】：

好的。我发现如何在 jsfiddle 中重现相同的内容。检查这个新链接jsfiddle.net/saqonfnf/1我刚刚在jquery框中添加了jquery版本，您可以在外部资源中找到jquery.mobile版本
那么这个小提琴的预期行为与实际行为是什么？
预期的行为是模式弹出窗口有效。如果您检查第一个链接jsfiddle.net/saqonfnf 必须像这样工作。如果您使用 jquery 库检查第二个链接，它不起作用jsfiddle.net/saqonfnf/1 我需要它与库一起使用
有两个库的那个确实工作
不，它没有。具有两个库的那个不起作用jsfiddle.net/saqonfnf/1 我检查了 chrome、ff 和 ie。第一个链接将两个库都作为外部资源。这是不正确的添加，所以你必须相信这个没有添加库。

标签： jquery css jquery-mobile

【解决方案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 在其他线程中提供了解决方案。

【讨论】：