如何在没有ajaxcontroltoolkit的情况下创建模式数据弹出窗口

Question

I have a button created inside a cell in my aspx.cs file like so:

tcedit.Text = "<button id='btnClr' onclick="func1(document.getElementById('sysconfig" + count + "'));return false;" class='ButtonNoWidth' style='height:19px;'>edit</button>";

Here's the corresponding function in .aspx

function func1(row, ignoreList) {
                //code
                func2(row.getAttribute("key"), row.getAttribute("val"), row.getAttribute("dispval") == "true", row.getAttribute("dontencrypt") == "true");
            }
function func2(key, val, display, dontencrypt) {
                document.getElementById("txtKey").value = key;
                document.getElementById("txtValue").value = val;
                document.getElementById("chkDisplayValue").checked = display;
                document.getElementById("chkDontEncryptValue").checked = dontencrypt;
                //code
            }

In the .asp file, I have a standard form dataTable that is static on the page and whenever a button is clicked from a list of elements, it updates the form with the data from that element, allowing the editing and saving of any changes to the data.

<form id="Form1" method="post" runat="server">
  <table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr id="dataTable" runat="server" visible="true">
      <td>
        <table border="0" cellpadding="0" cellspacing="10">
          <tr>
            <td class="FieldPromptText">
              Key:
            </td>
            <td>
            <asp:DropDownList ID="ddKey" runat="server" CssClass="Field" Width="450" onchange="LoadKeyValueFromList(this)"></asp:DropDownList>
            <br />
            <asp:TextBox ID="txtKey" runat="server" CssClass="Field" Text="" Width="450" onkeyup="SetKeyList(this.value);"></asp:TextBox>
            </td>
          </tr>
          <tr>
            <td class="FieldPromptText">
              Value:
            </td>
            <td>
              <asp:TextBox ID="txtValue" runat="server" CssClass="Field" Text="" Width="450" TextMode="MultiLine" Height="60"></asp:TextBox>
            </td>
          </tr>
          <tr>
            <td class="FieldPromptText" style="white-space: nowrap;">
              Display Value:
            </td>
            <td style="white-space:nowrap;" class="FieldPromptText">
              <asp:checkbox id="chkDisplayValue" runat="server" CssClass="Field" checked="false"></asp:checkbox>
                                &nbsp;&nbsp;&nbsp;
                                Don't Encrypt:
              <asp:checkbox id="chkDontEncryptValue" runat="server" CssClass="Field" checked="false"></asp:checkbox>
            </td>
          </tr>
          <tr>
              <td>&nbsp;</td>
            <td>
              <input type="button" id="btnAddKeyValue" runat="server" onclick="AddKeyValue();" class="ButtonNoWidth" value="Submit" /> &nbsp; 
              <button id="btnClr" onclick="ClearKeyVal();" class="ButtonNoWidth">Clear</button>
            </td>                                    
          </tr>
          <tr>
            <td id="tdConfirmation" runat="server" colspan="2" class="FieldPromptText" style="color: #0026ff"></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</form>

What I'm trying to do is move that form that is currently static on the page, to a modal popup of the same form. A huge majority of the examples I've seen online all use the ajaxcontroltoolkit, I would like to avoid any additional packages and do this with only javascript/jquery. I tried using bootstrap, but the css messed with mine

Answer 1

You can use Twitter Bootstrap and to make sure that the bootstrap CSS doesn't mess with the other elements on your page you can try the following work around:

1. Create a new empty style sheet eg modal.css .
2. Move all .modal style rules from bootstrap.css to modal.css .
3. Move all .fade style rules from bootstrap.css to modal.css .
4. Move all .close style rules from bootstrap.css to modal.css .
5. Add a reference to modal.css on your web page.

Complete example:

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="Content/modal.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <h1>Modal Body</h1>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>