Question

我在aspx.cs文件的单元格内创建了一个按钮，如下所示：

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

这是.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
            }

在.asp文件中，我有一个在页面上是静态的标准表单dataTable，每当从元素列表中单击一个按钮时，它就会使用该元素中的数据更新表单，从而允许编辑和保存对数据的任何更改。

<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>

我要做的是将页面上当前为静态的表单移动到相同表单的模式弹出窗口。我在网上看到的绝大多数示例都使用了ajaxcontroltoolkit，我想避免使用任何其他软件包，并且只使用javascript / jquery来完成此操作。我尝试使用bootstrap，但css搞砸了我的

Answer 1

您可以使用Twitter Bootstrap并确保引导CSS不会与您页面上的其他元素混淆，您可以尝试以下解决方法：

创建一个新的空样式表，例如modal.css。
将所有.modal样式规则从bootstrap.css移至modal.css。
将所有.fade样式规则从bootstrap.css移至modal.css。
将所有.close样式规则从bootstrap.css移至modal.css。
在您的网页上添加对modal.css的引用。

完整示例：

<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>

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

1 个答案: