从代码后面打开Bootstrap模式

时间:2015-11-18 14:55:42

标签: javascript jquery asp.net twitter-bootstrap

我正在尝试从后面的代码中打开引导模式。但是,当我单击按钮时会出现警报消息,但模式永远不会显示在页面上。我已经看过其他问题,但没有一个对我有用。请问有什么我想念的吗?

ASPX页面

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
         function openModal() {
             alert('hiii');
             $('#myModal').modal('show');
         }          
    </script>


    <div id="myModal" class="modal fade" role="dialog" runat="server">
        <div class="modal-dialog">

        <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
     </div>

    <div>
        <asp:Button runat="server" ID="btnUploadFile" Text="Upload File" OnClick="btnUploadFile_OnClick" class="btn standard-gradient disabled" />
    </div>
</asp:Content>

背后的代码

protected void btnUploadFile_OnClick(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}

1 个答案:

答案 0 :(得分:0)

我有一个带有布局的母版页Default.aspx:

LinkedBlockingQueue<String> queue = new LinkedBlockingQueue<String>(5);
queue.add("ddd");
queue.count // =5
queue.size // =1
queue.remainingCapacity() // =4

在codebedind中:

<html>
     <head>
            <link rel="stylesheet" type="text/css" href="../Styles/bootstrap.min.css" />   
     <script src="../js/bootstrap.min.js" type="text/javascript"></script> 
     </head>
    <body>
        <input type="hidden" runat="server" value="" id="hiddenAlert" name="hiddenAlert" clientidmode="Static" />
    ………….
    <div class="modal modalMain fade" id="myModalMain" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow-y: hidden;">
        <div class="modal-dialog" style="position: relative; top: 25%; left: 0%; width: 300px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="modalBody" class="modal-body modal-body-main">
                    ...
                </div>
                <div class="modal-footer" style="margin-top: 0px; padding: 5px; text-align: center;">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    if ($('#hiddenAlert').val() != '') {
        $('.modal-body-main').html($('#hiddenAlert').val());
        $('.modalMain').modal('show');

    }
</script>

     </body>
</html>

在另一页中,我有一个表单和一个提交按钮

protected void Page_Load(object sender, EventArgs e)
{
    ………..
    string alert = this.Request["alert"];
            if(alert == "success")
                hiddenAlert.Value = "Data saved successfull";
            else
                hiddenAlert.Value = "Data saved fail";
}

在codebedind中:

<asp:Button ID="btnLuu" runat="server" Text="Lưu" CssClass="input" onclick="btnLuu_Click"/>

因此,您可以显示任何提醒内容:成功,失败或存在数据......系统会弹出您网站中所有网页的模式。