使用模式加载页面ajax + jquery

我不能为我的生活弄清楚如何在模态弹出框中加载外部页面。我使用的模式弹出框从http://dinbror.dk/bpopup/使用模式加载页面ajax + jquery

由于我是JavaScript的新手，我无法弄清楚文档。我可以加载一个常规的弹出框，这很容易对我来说，但是当它涉及到装载阿贾克斯模式，我不知道在哪里的HTML文档中声明这一点：

$('element_to_pop_up').bPopup({ 
      contentContainer:'.content', 
      loadUrl: 'test.html' //Uses jQuery.load() 
     });

这个脚本应该加载测试。在弹出窗口中的HTML，并没有。它会加载一个空白的弹出框。

这里是我试图这样做，以使这项工作：

<button id="my-button">Pop it Up</button> 
<div id="element_to_pop_up"> 

<!-- Ajax Javascript that supposed to popup in modal--> 
<script>$('element_to_pop_up').bPopup({ 
      contentContainer:'.content', 
      loadUrl: 'test.html' //Uses jQuery.load() 
     });</script> 

</div>

任何想法我搞砸了？

来源

2014-02-27 user5248

可能重复？ http://stackoverflow.com/questions/3837166/jquery-load-modal-dialog-contents-via-ajax – DrewRobertson93

我认为这将是一个重复如果该问题是使用相同的jQuery插件。 – jkw4703

You are close。你所缺少的是你需要一个onclick事件绑定到您的按钮，并把它的$（document）内。就绪像这样：

<script> 
$(document).ready(function() { 
$('#my-button').bind('click', function(e) { 

     // Prevents the default action to be triggered. 
     e.preventDefault(); 

     // Triggering bPopup when click event is fired 
     $('#element_to_pop_up').bPopup({ 
      contentContainer:'.content', 
      loadUrl: 'test.html' //Uses jQuery.load() 
     }); 
    }); 
}); 
</script>

来源

2014-02-27 23:55:28 jkw4703

真棒，工作很好。现在我对这个工作原理有了更好的理解。 – user5248

很高兴我能帮到你。如果有效，请将其标记为已回答。^_^ – jkw4703

我想知道是否有办法扩展这个脚本。即。我希望这可以用于每个＃my-button1，＃my-button2和＃element_to_pop_up1，＃element_to_pop_up2的重复javascript的几个弹出窗口。 Anotherwords是否有一种方法来绑定所有的Ajax事件而不重复javascript代码，如果我这样做，我认为这会使页面超载。 – user5248

尝试使用# char查找元素，因为您正在尝试通过id查找。

<script> 
    $(document).ready(function() { 
     $('#element_to_pop_up').bPopup({ 
      contentContainer:'.content', 
      loadUrl: 'test.html' //Uses jQuery.load() 
     }); 
    }); 
</script>

来源

2014-02-27 23:38:00

这是你想要的测试页：

<html> 
    <head> 
     <style> 
     #element_to_pop_up { display:none; } 
     </style> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script> 
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.9.4.min.js"></script> 
<script> 
;(function($) { 
    $(function() { 
     $('#my-button').bind('click', function(e) { 
      e.preventDefault(); 
      $('element_to_pop_up').bPopup({ 
       contentContainer:'.content', 
       loadUrl: 'test.html' //Uses jQuery.load() 
       }); 
     }); 
    }); 
})(jQuery); 
</script> 

    </head> 
    <body> 

     <!-- Button that triggers the popup --> 
     <button id="my-button">POP IT UP</button> 
     <!-- Element to pop up --> 
     <div id="element_to_pop_up">Content of popup</div> 

    </body> 
</html>

来源

2014-07-22 16:28:07

使用模式加载页面ajax + jquery

回答

相关问题