1

我创建了一个应用程序，我想在其中阻止 UI 加载。单击按钮时，将打开新的弹出窗口，我想在加载时阻止弹出窗口 UI。实际上，我编写的代码将在新的弹出窗口中打开窗口，我想阻止 UI 直到整个页面加载完毕。我没有为加载时的阻塞 UI 创建任何 JQUERY。

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link rel="stylesheet" type="text/css" href="contentslider.css" />  
    <link rel="stylesheet" type="text/css" href="js/jquery-ui.css" />  
    <script type="text/javascript">
        $(function () {
            $("#tabs").tabs();
        });
    </script>
<script type="text/javascript" src="js/contentslider.js">
</script>
<script type="text/javascript" src="js/contentslider1.js">
</script>
<script type="text/javascript" src="js/contentslider2.js">
</script>
<script type="text/javascript" src="js/contentslider3.js">
</script>
<script type="text/javascript" src="js/contentslider4.js">
</script> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <div id="tabs">
        <%# Eval("Qsnsubject")%>
        <asp:Repeater ID="TablLinkRepeater" runat="server">
            <HeaderTemplate>
                <ul>
            </HeaderTemplate>
            <ItemTemplate>            
                <li><a href="#Tab<%#(((RepeaterItem)Container).ItemIndex).ToString() %>"><%# Eval("Qsnsubject")%>
                   </a></li>
            </ItemTemplate>
            <FooterTemplate>
                </ul>
            </FooterTemplate>
        </asp:Repeater>

        <%-- Tabs and Content --%>
        <asp:Repeater ID="TabRepeater" runat="server">
            <ItemTemplate>
                <div id="Tab<%#(((RepeaterItem)Container).ItemIndex).ToString() %>">                    
                 <div id="slider<%#(((RepeaterItem)Container).ItemIndex).ToString() %>" class="sliderwrapper"> 
                    <asp:Repeater ID="ContentRepeater" runat="server">
                        <ItemTemplate>                        
                            <div class="Content" id="ContentDiv" runat="server">                                  
                            <div  class="contentdiv">
                            <asp:PlaceHolder ID="PlPreview" runat="server"></asp:PlaceHolder>   
                                <br>                                             
                               <input id="r" class="reset" data-info="<%# Eval("ContentIndex") %>" type="button" value="Reset" />
                               <input id="m" class="Mark" data-info="<%# Eval("ContentIndex")  %>" type="button" value="Mark as review" />
                               <input id="u" class="Unmark" data-info="<%# Eval("ContentIndex")  %>" type="button" value="Unmark as Review"  />
                            </div>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                 </div>
                 <div id="paginate-slider<%#(((RepeaterItem)Container).ItemIndex).ToString() %>" class="pagination"> 
                </div>
                 <div id="paginate1-slider<%#(((RepeaterItem)Container).ItemIndex).ToString() %>" class="pagination2">    

                          </div>

                </div>

            </ItemTemplate>
        </asp:Repeater>
         <div class="pagination2" style="text-align:right">
                          <asp:Button ID="btnsubmit" runat="server" Text="Submit" BorderStyle="Inset" 
                              Width= "100px" Height="40px"
                              ToolTip="Click to Submit the Exam" onclick="btnsubmit_Click" /></div> 
   </div>

    <div>

        </div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#slider0').block({ message: '<h1>WELCOME! Press Next to show questions</h1>',
            css: { border: '3px solid #a00' }
        });

    });   
    $(".pagination").click(function () {
        $('#slider0').unblock();       
    });
    $(".pagination2").click(function () {
        $('#slider0').unblock();
    });
    featuredcontentslider.init({
        id: "slider0",
        contentsource: ["inline", ""],
        toc: "#increment",
        nextprev: ["Previous", "Next"],
        revealtype: "click",
        enablefade: [true, 0.2],
        autorotate: [true, 3000],
        onChange: function (previndex, curindex, contentdivs) {
        }


    })

</script>  
<script type="text/javascript">

    featuredcontentslider1.init({
        id: "slider1",
        contentsource: ["inline", ""],
        toc: "#increment",
        nextprev: ["Previous", "Next"],
        revealtype: "click",
        enablefade: [true, 0.2],
        autorotate: [true, 3000],
        onChange: function (previndex, curindex, contentdivs) {
        }


    })

</script>
<script type="text/javascript">

    featuredcontentslider2.init({
        id: "slider2",
        contentsource: ["inline", ""],
        toc: "#increment",
        nextprev: ["Previous", "Next"],
        revealtype: "click",
        enablefade: [true, 0.2],
        autorotate: [true, 3000],
        onChange: function (previndex, curindex, contentdivs) {
        }


    })

</script>
<script type="text/javascript">

    featuredcontentslider3.init({
        id: "slider3",
        contentsource: ["inline", ""],
        toc: "#increment",
        nextprev: ["Previous", "Next"],
        revealtype: "click",
        enablefade: [true, 0.2],
        autorotate: [true, 3000],
        onChange: function (previndex, curindex, contentdivs) {
        }


    })

</script>
<script type="text/javascript">

    featuredcontentslider4.init({
        id: "slider4",
        contentsource: ["inline", ""],
        toc: "#increment",
        nextprev: ["Previous", "Next"],
        revealtype: "click",
        enablefade: [true, 0.2],
        autorotate: [true, 3000],
        onChange: function (previndex, curindex, contentdivs) {
        }


    })

</script> 

<script>

    $('input[type=radio]').click(function (e) {
        thisdata = $(this).attr('data-info');
        $("#pno" + thisdata).css("background-color", "Green");
       });

    $(".reset").click(function () {
        thisdata = $(this).attr('data-info');
        $('input[data-info=' + thisdata + ']').attr('checked', false);
        $("#pno" + thisdata).css("background-color", "Red");       
    });
    $(".Mark").click(function () {
        thisdata = $(this).attr('data-info');
        if ($('input[data-info=' + thisdata + ']').is(':checked'))
        {
            $("#pno" + thisdata).css("background-color", 'RGB(128,0,128)');
        }
    });
    $(".Unmark").click(function () {
        thisdata = $(this).attr('data-info');
        if ($('input[data-info=' + thisdata + ']').is(':checked')) {
            $("#pno" + thisdata).css("background-color", "Green");
        }
    });

//    $(document).bind("contextmenu", function (e) {
//        e.preventDefault();

//    });
    $("#ContentPlaceHolder1_btnsubmit").click(function () {
        $.blockUI();
    });

    $(window).unload(function () {
        $.cookie("unameName", null);
    });

//    $('input[type=button]').click(function () {
//        console.log("hgh");
//        thisdata = $(this).attr('data-info');
//        $("#pno" + thisdata).css("background-color", "#111");
//    });
//    $('.toc').click(function () {           
//       
//     $(this).css("background-color", "#008000");
//     });  
//         

</script>


</asp:Content>
4

0 回答 0