Question

如何打开模式框，其中包含来自其他网页的内容点击后的变化（就像Twitter.com所做的那样）？

请看Twitter.com的功能。

我有一个简单的例子，它可以完全按照我的意愿工作，除了在调用模态框时URL没有改变。

我有两个文件＆＃34; Call.html＆＃34; ＆安培; ＆＃34;的test.html＆＃34;

以下是文件的内容：

Call.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>


<a href="Test.html" data-toggle="modal" data-target="#Modal">Test</a>


<div id="Modal" class="modal fade text-center">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

的test.html

Some Text ...

所以，让我们说我的网站名为：www.mysite.com

当我去：

www.mysite.com/Call.html

并点击超链接，

出现模式框，其中包含Test.html的内容

但是，URL保持不变（即www.mysite.com/Call.html）。

我希望将网址更改为：

www.mysite.com/Test.html

点击超链接时（就像Twitter.com所做的那样）。

（任何人都知道该怎么做？）

然后，打开模态框，关闭模态框，我想将URL更改回 www.mysite.com/Call.html（就像Twitter.com所做的那样）

任何人都知道如何做到这一切？

提前致谢！

Answer 1

您可以使用JQuery AJAX进行此操作，甚至在选择指向其他网页的链接时也会更加动态：

＆＃13;

$(document).ready( function()
{
  //Add this on your call.html page
    $(".link").click(function()
    {
        //if you need the link to be dynamic you can use attributes on the element to set the url
        var hash = $(this).attr("data-url");
        console.log("page = " + hash);
        
        //set hash on url to whatever it is
        window.location.hash = hash;
                
        //Stop event bubbling up DOM
        event.preventDefault(); 
        
        var page = $(this).attr('href');
        console.log("page = " + page);
        
        //send a request to the server to retrieve your .html page
        $.ajax(
        {
          method: "GET",
          //this should be updated with location of file
          url: page, 
          //if server request to get page was successful
          success: function(result)
          {
            $(".modal-content").load(result)
          },
          //otherwise do this, note this example will fail as test.html doesnt exist in this location
          error: function(result)
          {
            $(".modal-content").html("<div class='error'><span><b> failed to get a response </b></span><p> try again later </p></div>");
          }
        });
    });
});

//revert url back to previous
function revertToOriginalURL() 
{
    var original = window.location.href.substr(0, window.location.href.indexOf('#'));
    history.replaceState({}, document.title, original);
}
    
//when modal is closed revert url back to previous state
$('.modal').on('hidden.bs.modal', function () {
    revertToOriginalURL();
});

＆＃13;

.error
{
  border: 2px dotted red;
  margin: 5px;
}

a
{
  font-size: 20px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>


<a class="link" data-url="test.html" data-toggle="modal" data-target="#Modal" href="test.html">Show Test.html</a>
<br />
<a class="link" data-url="test2.html" data-toggle="modal" data-target="#Modal" href="test2.html">Show Test2.html</a>

<div id="Modal" class="modal fade text-center">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

＆＃13;

要注意如果选择器没有匹配任何元素 - 在这种情况下，如果文档不包含带有＆＃34; .modal-content＆＃34;的元素。 - 不会发送Ajax请求。

更新

您的评论听起来像是在寻找：window.location.hash

我更新了上面的示例，让您尝试自己的域名。

如何打开模式框，其中包含来自其他网页的内容，点击后网址会发生变化？

1 个答案:

更新