コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > js プロンプト ボックスはシステム アラートを置き換え、アラート ダイアログ ボックスを自動的に閉じます。

js プロンプト ボックスはシステム アラートを置き換え、アラート ダイアログ ボックスを自動的に閉じます。

高洛峰
リリース： 2016-12-07 14:39:46
オリジナル
1563 人が閲覧しました

私は自分でアラートプロンプトボックスを書きました。システム アラートは Apple 携帯電話の WeChat にあるため、プロンプトが表示されると、Web サイトのアドレスが上部に表示されます。

同時に、その後の他の操作をjsで埋める必要があります。そこで、div を使用してアラート プロンプト ボックスを作成し、自動的に閉じました。

レンダリング

js プロンプト ボックスはシステム アラートを置き換え、アラート ダイアログ ボックスを自動的に閉じます。

js プロンプト ボックスはシステム アラートを置き換え、アラート ダイアログ ボックスを自動的に閉じます。

cssスタイル

/*弹出消息对话框样式*/
.show_alert_box{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background-color:rgba(0,0,0,0.6);
display:none;
z-index:200;
}
.show_alert_div{
width:70%;
position:absolute;
top:50%;
left:15%;
margin-top:-80px;
background-color:#fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border:1px solid #797979;
overflow:hidden;
box-sizing:border-box;
}
 
 
.show_alert_div h1{
width:100%;
float:left;
font-size:20px;
color:#353535;
text-align:center;
line-height:26px;
margin-top:20px;
}
.show_alert_div h2{
width:100%;
float:left;
font-size:16px;
color:#353535;
text-align:center;
line-height:20px;
margin:20px 0px 70px 0px;
box-sizing:border-box;
padding:0px 15px;
}
 
 
.show_alert_div h3{
width:100%;
float:left;
font-size:16px;
color:#353535;
text-align:center;
line-height:20px;
margin:25px 0px 20px 0px;
box-sizing:border-box;
padding:0px 15px;
}
 
/*仅显示消息时 showInformation方法填充提示西信息
*/
.alert_message_font{
width:100%;
float:left;
font-size:16px;
color:#353535;
text-align:center;
line-height:20px;
margin:25px 0px 20px 0px !important;
box-sizing:border-box;
padding:0px 15px;
}
 
.show_alert_div .show_alert_button_box{
width:100%;
height:40px;
position:absolute;
bottom:0px;
left:0px;
border-top:1px solid #ccc;
}
.show_alert_div .show_alert_button_box .alert_button_div{
width:50%;
height:40px;
float:left;
font-size:18px;
line-height:40px;
text-align:center;
color:#353535;
box-sizing:border-box;
border-right:1px solid #ccc;
}
 
.show_alert_div .show_alert_button_box .show_close_button{
width:100%;
height:40px;
float:left;
font-size:18px;
line-height:40px;
text-align:center;
color:#353535;
box-sizing:border-box;
border-right:1px solid #ccc;
}
.show_cancel_button{
width:50%;
border-right:0;
}
/*输入对话框样式*/
.show_alert_box_input{
width:100%;
position:fixed;
top:0px;
left:0px;
background-color:rgba(0,0,0,0.6);
display:none;
z-index:200;
}
.show_alert_div_input{
width:90%;
position:absolute;
top:50%;
left:5%;
margin-top:-80px;
background-color:#fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border:1px solid #797979;
overflow:hidden;
box-sizing:border-box;
}
 
 
.show_alert_div_input h1{
width:100%;
float:left;
font-size:20px;
color:#353535;
text-align:center;
line-height:26px;
margin-top:20px;
}
.show_alert_div_input h2{
width:100%;
float:left;
font-size:14px;
color:#353535;
text-align:center;
line-height:20px;
margin:25px 0px 70px 0px;
box-sizing:border-box;
padding:0px 15px;
}
.show_alert_div_input .show_alert_button_box_input{
width:100%;
height:40px;
position:absolute;
bottom:0px;
left:0px;
border-top:1px solid #ccc;
}
.show_alert_div_input .show_alert_button_box_input .alert_button_div_input{
width:50%;
height:40px;
float:left;
font-size:18px;
line-height:40px;
text-align:center;
color:#353535;
box-sizing:border-box;
border-right:1px solid #ccc;
}
.show_alert_div_input .show_alert_button_box_input .show_close_button_input{
width:100%;
height:40px;
float:left;
font-size:18px;
line-height:40px;
text-align:center;
color:#353535;
box-sizing:border-box;
border-right:1px solid #ccc;
}
 
/*如何领奖提示框样式*/
.show_alert_box_how_button{
width:100%;
position:fixed;
top:0px;
left:0px;
background-color:rgba(0,0,0,0.6);
display:none;
z-index:200;
}
.show_alert_div_how_button{
width:90%;
position:absolute;
top:50%;
left:5%;
margin-top:-80px;
background-color:#fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border:1px solid #797979;
overflow:hidden;
box-sizing:border-box;
}
 
 
.show_alert_div_how_button h1{
width:100%;
float:left;
font-size:20px;
color:#353535;
text-align:center;
line-height:26px;
margin-top:20px;
}
.show_alert_div_how_button h2{
width:100%;
float:left;
font-size:14px;
color:#353535;
text-align:center;
line-height:20px;
margin:25px 0px 70px 0px;
box-sizing:border-box;
padding:0px 15px;
}
.show_alert_div_how_button .show_alert_button_box_how_button{
width:100%;
height:40px;
position:absolute;
bottom:0px;
left:0px;
border-top:1px solid #ccc;
}
.show_alert_div_how_button .show_alert_button_box_how_button .alert_button_div_how_button{
width:50%;
height:40px;
float:left;
font-size:18px;
line-height:40px;
text-align:center;
color:#353535;
box-sizing:border-box;
border-right:1px solid #ccc;
}
.show_alert_div_how_button .show_alert_button_box_how_button .show_close_button_how_button{
width:100%;
height:40px;
float:left;
font-size:18px;
line-height:40px;
text-align:center;
color:#353535;
box-sizing:border-box;
border-right:1px solid #ccc;
}
ログイン後にコピー

jsコード

$(function () {
$(".show_close_button").click(function () {
$(".show_alert_box").css("display", "none");
});
 
$(".show_cancel_button").click(function () {
$(".show_alert_box").css("display", "none");
});
})
 
/*
* 显示提示对话框
* title 标题
* content 提示内容
* isShowAlertButton 是否显示操作按钮 仅用于错误提示
* url 多按钮时 主按钮跳转url
* urltext主按钮内容提示西信息
* isTimer是否自动关闭对话框,仅用于错误提示时
*
* 页面布局 在页面中添加如下代码
*
<div class="show_alert_box">
<div class="show_alert_div">
<h1>恭喜您</h1>
<h2></h2>
<div class="show_alert_button_box">
<div class="show_close_button">知道了</div>
<div onclick="requestLotteryPrize()" class="alert_button_div viewawardbtn">领取奖励</div>
<div class="alert_button_div show_cancel_button">取消</div>
</div>
</div>
</div>
* */
function showInformation(title, content,isShowTitle,isShowAlertButton,isTimer,url, urltxt){
$(".show_alert_div h1").html(title);
$(".show_alert_div h2").html(content);
 
// 隐藏标题
if(isShowTitle!=null&&isShowTitle==false){
$(".show_alert_div h1").css("display", "none");
}
 
if(url==null || url==""){
//显示单条
$(".alert_button_div").css("display", "none");
$(".show_close_button").css("display", "block");
 
// 隐藏底部按钮
if(isShowAlertButton!=null&&isShowAlertButton==false){
$(".show_alert_button_box").css("display", "none");
 
$(".show_alert_div h2").addClass("alert_message_font");
}
 
// 定时自动关闭
if(isTimer!=null&&isTimer==true){
setTimeout("timerCloseAlertBox()",2000);
}
}else{
//显示多条
$(".show_alert_div h2").css("display", "block");
 
$(".viewaward").attr(&#39;href&#39;,url);
$(".viewawardbtn").html(urltxt);
 
/*注释于2016-07-08 屏蔽底部取消领奖等按钮 */
$(".alert_button_div").css("display", "block");
$(".show_close_button").css("display", "none");
 
/* $(".alert_button_div").css("display", "none");
$(".show_close_button").css("display", "block") */
}
 
$(&#39;.show_alert_box&#39;).css("display", "block");
}
 
/*
* 弹出简单信息提示
* 页面布局 在页面中添加如下代码
* <div class="show_alert_box">
<div class="show_alert_div">
<h3></h3>
</div>
</div>
*/
function showAlertMessage(message){
 
// 显示提示框
$(&#39;.show_alert_box&#39;).css("display", "block");
 
// 填充信息提示
$(".show_alert_div h3").html(message);
 
// 自动关闭
setTimeout("timerCloseAlertBox()",2000);
}
 
// 定时关闭提示框
function timerCloseAlertBox(){
$(&#39;.show_alert_box&#39;).css("display", "none");
}
ログイン後にコピー

使用例

まずjsファイルを参照するには、 jquery.Basic js ファイルを使用する必要があります

その後スタイルファイルを導入します

ページのタスク位置にdivレイヤーをいくつか追加します

<div class="show_alert_box">
<div class="show_alert_div">
<h1>恭喜您</h1>
<h2></h2>
<div class="show_alert_button_box">
<div class="show_close_button">知道了</div>
<div onclick="requestLotteryPrize()" class="alert_button_div viewawardbtn">领取奖励</div>
<div class="alert_button_div show_cancel_button">取消</div>
</div>
</div>
</div>
ログイン後にコピー

jsで呼び出します

パラメータはタイトル、プロンプト内容、タイトルを表示するかどうか、操作ボタンを表示するかどうか、有効にするかどうかです自動で閉じてURLを転送 ボタンをクリックするとファイル情報の説明にジャンプします 

showInformation(title, content,isShowTitle,isShowAlertButton,isTimer,url, urltxt)方法或者
 
showAlertMessage(message)
ログイン後にコピー


関連ラベル：
js
ソース：php.cn
前の記事：JS は傾きを使用して DIV に入るマウスの 4 つの方向を決定します 次の記事：AngularJs でのロールベースのフロントエンド アクセス制御の実装
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
複数のルートで宣言されたワーカープールは、しきい値を気にせずに CPU 使用率を維持できますか CPU を集中的に使用するタスクを処理するワーカープールを備えた Node.js システムを見つけたいと考えていますが、複数のルートにわたる CPU 使用率については少し混乱してい...
から 2024-04-06 19:54:23
0
1
444
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
Nuxt.js で作成したダッシュボードをデプロイするには SSG を使用する必要がありますか? Nuxt.jsを使用して社内向けのダッシュボードを開発していきます。これは内部ダッシュボードであるため、ユニバーサル スキーマは必要ありません。通常、ほとんどのダッシュボードは S...
から 2024-04-06 13:17:44
0
1
493
Electron はプリロード時に AppData を取得します プリロードされた AppData ディレクトリを取得するにはどうすればよいですか? Background.js[...]asyncfunctioncreateWindow(){co...
から 2024-04-06 11:05:31
0
1
417
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート