コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 2 つの WEB の下のモーダル ダイアログ ボックス (asp.net または js で個別に実装)_JavaScript スキル

2 つの WEB の下のモーダル ダイアログ ボックス (asp.net または js で個別に実装)_JavaScript スキル

WBOY
リリース： 2016-05-16 18:40:34
オリジナル
1360 人が閲覧しました

ここでは、2 つのモーダル ダイアログ ボックスを作成する私自身の方法を紹介または示します

1
この方法はASP.NET AJAX 拡張コントロールを使用して実装: ASP.NET AJAX コントロール ツール キットの ModalPopupExtender コントロール:
最初のステップでは、まず ASP.NET ページを作成します: ModalPopup.aspx
ページ コード:

コードをコピー コードは次のとおりです:

<%@ Page Language= "C#" AutoEventWireup ="true" CodeFile="AjaxControlToolkit.aspx.cs"
Inherits="_Default" %>

<%@ 登録アセンブリ="AjaxControlToolkit" 名前空間="AjaxControlToolkit" TagPrefix ="cc1" %>


タイトル>






< asp:LinkBut​​ton ID ="lbtn_Login" runat="server">Login
<%-- パネルの表示 CSS 属性をタグに記述する必要があります。 --%>



< /html>
[code]
using System;
using System.Linq; >System.Web を使用;
System.Web.UI を使用;
System.Web.UI.WebControls を使用;

パブリック部分クラス _Default : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Btn_Submit_Click(object sender, EventArgs e)
{
if (this.UserName. Text.Trim ().ToUpper() == "JACKY" && this.Password.Text.Trim() == "123")
{
this.lbResult.Text = "ログイン成功! ";
}
else
{
this.lbResult.Text = "ログインに失敗しました! ";
}
}

protected void Btn_Cancel_Click(object sender, EventArgs e)
{
this.ModalPopupExtender1.Hide();
this.UserName.Text = "";
this.Password.Text = "";
this.lbResult.Text = ""
}
}


これは簡単です。 pass 拡張コントロールはモーダルダイアログボックスの効果を実現できますが、よく考えたらpure JSで実装したほうが簡単だと思い、pure JSで実装したらサクッと成功しました

方法 2
今回は HTML ページを作成します: Popup.html
コードは次のとおりです:




コードをコピーします


コードは次のとおりです:









登录






これは、私が両方の方法で前に展示された那样の効果を実現しました、それは自己感見です、用纯JS 写効比用制御装置写より好、自己明确全体的効果代的

関連ラベル：
ダイアログボックス モーダル
ソース：php.cn
前の記事：JavaScript で関数を宣言する 3 つの方法 各関数はオブジェクトです (1)_JavaScript スキル。 次の記事：JavaScript は乱数を生成し、size_javascript スキルによって自動的に並べ替えます。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
opentbs を使用して odt ファイルを生成するときに発生する問題: 同じキーの値が別の列ではなく同じ行に表示されます。 PHPでodtを作成するためにOpenTbsというライブラリを使っていますが、列と行が動的に生成されるので利用しています。行と列の作成方法は知っていますが、それらを整理する方法がわ...
から 2024-04-06 20:18:18
0
1
483
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
テンプレートのメソッドで定義された変数の使用 Vue (v3 ではなく v2) を使用するのは初めてで、テンプレート内 (メソッド内で定義された) で変数を使用しようとしています。私の簡略化されたコード: <templa...
から 2024-04-06 18:10:25
0
2
513
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート