Setting width and height of modal window from JavaScript/JQuery to ASP.NET MVC inline code_问答_开发者

Setting width and height of modal window from JavaScript/JQuery to ASP.NET MVC inline code

开发者 https://www.devze.com 2023-01-10 11:00 出处：网络

This is my HTML ActionLink helper in the view: <%=Html.ActionLink(Resources.Localize.Routes_WidgetsEdit, \"Edit\", Model.ContentType.ToString(),

This is my HTML ActionLink helper in the view:

<%=Html.ActionLink(Resources.Localize.Routes_WidgetsEdit, "Edit", Model.ContentType.ToString(), 
new {slug = Model.Slug, modal = true}, 
new { 
      rel = "shadowbox;height=_HEIGHT_;width=_WIDTH_", 
      title = Resources.Localize.Routes_WidgetsEdit, 
      @class = "editWidget" 
})%>

It renders out this HTML

<a href="/Tab/Edit/tab-slug/tabgroup-slug?modal=True" rel="shadowbox;height=_HEIGHT_;width=_WIDTH_" title="Edit tab">Edit tab</a>

What I would like to do is insert dynamic values for HEIGHT and WIDTH, in JavaScript I get them like this:

<script type="t开发者_运维百科ext/javascript">
var width = $(window).width();
var height = $(window).height();
</script>

Now I need a jQuery selector or command to select the "rel" attribute of all the links on page that are wired up to Shadowbox (see shadowbox value in rel) and if they contain shadowbox and HEIGHT and WIDTH replace those two placeholders with actual values at runtime. The solution should be quite bulletproof.

Hopefully this will be a piece of cake for all you jqueryists out there. ;)

Not sure how bullet proof it is, but how about something like the following:

<html>
<head>

    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script>
        $(document).ready(function(){
            $("a").each(function()
            {
                if($(this).attr("rel").length > 0)
                {
                    if($(this).attr("rel").indexOf("shadowbox;") >= 0)
                    {
                        $(this).attr("rel", "shadowbox;height=" + $(window).height() + ";width=" + $(window).width());
                    }
                }
            });
        });
    </script>
</head>

<body>

<a href="/Tab/Edit/tab-slug/tabgroup-slug?modal=True" rel="shadowbox;height=_HEIGHT_;width=_WIDTH_" title="Edit tab">Edit tab</a>

<!-- don't set this one -->
<a href="/Tab/Edit/tab-slug/tabgroup-slug?modal=True" title="Edit tab">Edit tab</a>

<a href="/Tab/Edit/tab-slug/tabgroup-slug?modal=True" rel="shadowbox;height=_HEIGHT_;width=_WIDTH_" title="Edit tab">Edit tab</a>

</body>

</html>