Question

我有一些引导模式需要加载远程内容而不是点击，但加载页面时。为了尝试完成这个，我有一个php变量，它动态地抓取正确的URL，然后将它们作为段落标记放在页面中。

喜欢这样

<?=$page = 'dynamic string grabbing from url and other places'?> 
<p class="valu"><?= $page ?></p>

然后我在jquery中设置模态以获取字符串然后加载具有正确内容的模式，除了似乎有问题获得正确的页面。它只是重新加载它被重定向到的页面。

我看起来像这样的jquery

var val = $('valu').text();

$(window).load(function(){
    event.preventDefault();
    var myModal = $('.largeModal');
    var modalBody = myModal.find('.modal-content');
    modalBody.load(val);
    myModal.modal('show');
});

现在如果我把直接字符串放在modalBody.load中它似乎工作，虽然我真的需要它作为那个变量。我认为也许它没有将文本视为一个字符串，这就是为什么我没有工作，但是既没有将值作为字符串转换，也没有将引号连接在一起工作。

非常感谢任何帮助！

Answer 1

您应该在val事件中声明load属性。您的选择器中也有拼写错误，您忘记了.

$(window).load(function(){
    var val = $('.valu').text();
    var myModal = $('.largeModal');
    var modalBody = myModal.find('.modal-content');
    modalBody.load(val);
    myModal.modal('show');
});

PS。始终建议使用正确的PHP标记而不是简写<?php //something ?>

Answer 2

作为一种可能更好的解决方案，您可以在模式本身的属性data-remote中设置网址，如下所示：

<div class="modal fade hide" id="myModal" data-remote="<?= $page ?>">

这将为您加载内容，您所要做的就是显示模式：

$(window).load(function(){
    $('#myModal').modal('show');
});

以下文档为您提供了有关通过data-属性传递选项的更多信息：

Bootstrap

使用jQuery的Bootstrap3远程内容

2 个答案: