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

在一起使用jquery和jquery.mobile时，CSS无法正常工作

1 个答案: