Question

我正在尝试使用fancybox在页面上显示消息，但它无效。 </br>

我正在尝试使用fancybox打开一个精美的框并向用户提供一些消息。

我正在使用JSON来获取用户所在国家/地区，并希望将用户重定向到国家/地区具体网站..

我可以正确获取警报消息（“Hello USA”），但不能显示页面上的消息 <DIV>中的邮件未显示。我已添加JQuery图书馆，Fancy Box
CSS和JS也是JSON。什么不见了？向http://freegeoip.net/json提交一个非常简单的Ajax POST请求以获取国家/地区信息， <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>  <p> <link media="screen" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" /> <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script> <script> jQuery.ajax( { url: '//freegeoip.net/json/', type: 'POST', dataType: 'jsonp', success: function(location) { // If the visitor is browsing from Unites States. if (location.country_code === 'US') { alert("Hello USA"); // Tell him about the US Site. jQuery.fancybox.open(jQuery('#message')); } } } ); </script></p> <div style="display:none;"> <div style="padding:30px;" id="message"> <h1>Hola!</h1> <p>You are in USA, and we have a US Speific website <a href="site.com">here</a>.</p> </div> </div>，并做出相应的反应。

我是Jquery的新手..提前致谢

以下是我在HTML页面中提供的代码：

{{1}}

感谢您的帮助

我可以正确获取警报消息（“Hello USA”），但不能显示页面上的消息这个消息没有出现..我已经包含了JQuery Library，Fancy Box
CSS和JS也是如此。什么不见了？

Answer 1

将您的代码包裹在$(document).ready(..)

中

每当您的脚本/ JS尝试访问DOM（HTML结构）元素时，元素都应该存在。因此有必要包含$(document).ready(..)，因此JS代码仅在加载DOM元素后执行。

简而言之，除非DOM准备就绪，否则无法操纵页面。

<强> Refer this Link.

<script>
    $(document).ready(function () {
        jQuery.ajax({
            url: '//freegeoip.net/json/',
            type: 'POST',
            dataType: 'jsonp',
            success: function (location) {
                // If the visitor is browsing from Unites States.
                if (location.country_code === 'US') {
                    alert("Hello");
                    // Tell him about the US Site.
                    jQuery.fancybox.open(jQuery('#message'));
                }
            }
        });
    });
</script>

<强> Demo Fiddle

消息未使用fancybox </div>显示在<div>中

1 个答案: