How to show a bootstrap modal window after validation?

Question

I'd like to create the following functionality: If user clicks on a menu item and all changes were saved or there were no changes, another page is loaded. If changes were not saved then bootstrap modal window should be shown.

I have a menu like this:

<div>
  <ul>
    <li><a runat="server" id="toSettings" onserverclick="toSettings_ServerClick">Settings</a</li>
     ...
  </ul>
</div>

and use the following structure for modal window:

<div id="modal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h2>Changes not saved</h2>
    </div>
    <div class="modal-body">
        <p>
           some text
        </p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>

C# code I've tried:

 if (saved)
 {
     Response.Redirect("anotherPage.aspx");
 }
 else
 {
     string script = "<script type=\"text/javascript\"> $('#modal').modal('show'); </script>";
     ClientScript.RegisterClientScriptBlock(this.GetType(), "myscript", script);
 }

but modal window doesn't appear.

I suppose that something wrong with executing script in C# code.

I would be glad if someone help to correct my mistake or suggest another way to realize this functionality.

Thanks in advance.

Answer 1

First of all make sure you have all the jQuery-UI and bootstrap css and js files with you and properly referenced in the head section.

Next write a script in the Master-Page if you have one or in the same page at the end of the page, like this :

<script type="text/javascript">
function openModal() {
    $('#myModal').modal('show');
}
</script>

Then I could call the modal popup from code-behind with the following:

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