I'm using colorbox to load modal pages in my project. When I click to open one modal, the page takes a time to load and the window "lock" during a period. I made a simple page to represent my problem. Access: http://testes.tiagocrizanto.com/ When you click at Index2 the page load normally, but, when you click at Modal link the modal takes a time to load (note that the loading image lock for a while). If you open Chrome DevTools and select network tab you'll see the external js files loaded into modal window takes a time to load. In my example the window takes a while for load, but, if I try to load 3 or more js files the modal window could take 10 or more seconds to load.
Code to of the Index2 page and script to load modal:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Index2
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$('.cbox').colorbox({
innerWidth: 833,
innerHeight: 500,
scrolling: true
});
});
</script>
<a href="/Home/Modal" class="cbox">Modal</a>
</asp:Content>
Modal code:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Modal.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/ScriptFile.js") %>"></script>
<h2>Modal</h2>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeaderContent" runat="server">
</asp:Content>
Any ideas why it happening?
After a loooonnngggg search I found the solution: optimizing colorbox and adding extra jquery
ColorBox uses jQuery's load() method for it's ajax handling, so you just need to add the desired selector to the link's href.
$(document).ready(function () {
$('.cbox').colorbox({
href: function () {
return $(this).attr('href');
},
innerWidth: 833,
innerHeight: 500,
scrolling: true
});
});
Link buton:
<%: Html.ActionLink("Add", "Create", "Agenda", new { @class = "btn btn-mini pull-left margin-10 no-margin-left border-radius-3 cbox" })%>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.