Question

我在某个时候有这个工作，但它工作得很好，我无法弄明白为什么。

一旦我点击按钮，模态将打开文本加载...没有其他事情发生。我能够看到所选域名的whois数据。这是我应该在模态中看到的：http://demo.whmcs.com/whois.php?domain=test.info

代码：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Domain Checker</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function viewWhois(domain) {
    jQuery("#modalWhoisLoader").removeClass('hidden').show();
    jQuery("#modalWhoisBody").hide();
    jQuery("#whoisDomainName").html(domain);
    jQuery("#modalWhois").modal('show');
    jQuery.post("http://demo.whmcs.com/whois.php", "domain=" + domain,
        function(data) {
            jQuery("#modalWhoisBody").html(data);
            jQuery("#modalWhoisLoader").hide();
            jQuery("#modalWhoisBody").show();
        });
}
</script>
</head>
<body>

<button type="button" onclick="viewWhois('test.info')" class="btn btn-default btn-sm">WHOIS</button>

<div class="modal fade" id="modalWhois">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modalWhoisTitle">
                    WHOIS Results for <span id="whoisDomainName"></span>
                </h4>
            </div>
            <div class="modal-body text-center hidden" id="modalWhoisLoader">
                <p><i class="fa fa-spinner fa-spin"></i> Loading...</p>
            </div>
            <div class="modal-body" id="modalWhoisBody">
                            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                                            Close Window
                                    </button>
                            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>
</html>

＆＃13;

编辑：

这是我正在使用的正确代码（我仅将http://demo.whmcs.com/whois.php用于此问题）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function viewWhois(domain) {
    jQuery("#modalWhoisLoader").removeClass('hidden').show();
    jQuery("#modalWhoisBody").hide();
    jQuery("#whoisDomainName").html(domain);
    jQuery("#modalWhois").modal('show');
    jQuery.post("whois.php", "domain=" + domain,
        function(data) {
            jQuery("#modalWhoisBody").html(data);
            jQuery("#modalWhoisLoader").hide();
            jQuery("#modalWhoisBody").show();
        });
}
</script>

Answer 1

如果您查看浏览器的开发者工具，您应该看到，打开模态后，您会看到

@media screen and (max-width: 500px) {
    theClassCreated{width:100%;}
}

基本上，您不能调用该URL，因为它不接受跨域请求（请参阅此处：Loading cross domain endpoint with jQuery AJAX）。

请求相同的域资源时，您的示例应该有效。你有（非）工作的例子吗？

Boostrap 3 Modal + jQuery with＆＃34; whois script＆＃34;

1 个答案: