ボタンをクリックしたときにダイアログボックスを表示する方法

"転送"ボタンをクリックするとダイアログボックスを表示したいと思います。このダイアログでは、同じページを継続するか、同じページに留まるかどうかを確認する必要があります。あなたはどうやってそれをしますか？ボタンをクリックしたときにダイアログボックスを表示する方法

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css"> 
     <script src="http://code.jquery.com/jquery.min.js"></script> 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
     <title>Test</title> 
<script> 
$(document).ready(function() { 
    $("#dialog").dialog({ 
     modal: true, 
     buttons: { 
     "Yes": function() { 
      $('#valid'); 
      //$(this).dialog("close"); 
     }, 
     "No": function() { 
      $(this).dialog("close"); 
     } 
     } 
    }); 
    }); 

</script> 
    </head> 

    <body> 
    <div id="dialog" title="Box"> 
    </div> 
    <p>Welcome...!</p> 
    <input type="file"/> 
    <input type="submit" id="valider" name="valid" value="Forward"/> 
    </body> 
</html>

出典

2017-08-23 John

のクリック時にダイアログを表示するためにclickイベントリスナーを追加する必要がありますか？ htmlのフォームは表示されません – Niladri

ダイアログメッセージが表示されたら、ボタンをクリックするにはどうすればよいですか？ – John

window.location.assignを見てくださいhttps://developer.mozilla.org/en-US/docs/Web/API/Window/location#Example_1_Navigate_to_a_new_page – jeff

が、これはあなたが<form>要素を追加する必要があり、

if (confirm("your message")) { 

    // your code 

}

出典

2017-08-23 11:50:06 WithoutHope

まず..あなたのために働く必要があります。

以下は私のソースコードです。次に、id、ターゲットファイル、およびonsubmit関数を割り当てます。 return firstModal()と書きます。

はのは firstModal()を作成してみましょう：1 閉じるおよびその他のを送信：私たちは二つのオプションでモーダルを作成するjQueryのUIから .dialog使用します。最初に $(this).dialog("close")にリンクしてダイアログを閉じ、もう1つを document.getElementById("myForm").submit()にリンクすると、 actionに設定されたターゲットファイルにHTMLフォームを送信できます。確認のために、別の最初の入力を1：：2つのモーダルボックスを作成することができます

：

はここで完全に動作するコードです

let confirmFormDialog = function(form) { 
 

 
    $("#dialog").dialog({ 
 
    modal: true, 
 
    buttons: { 
 
     Send: function() { 
 
     document.getElementById("myForm").submit(); 
 
     }, 
 
     Close: function() { 
 
     $(this).dialog("close"); 
 
     } 
 
    } 
 
    }); 
 
    
 
    return false; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 

 
<div id="dialog" title="Box"></div> 
 
<p>Welcome...!</p> 
 
<form id="myForm" onsubmit="return confirmFormDialog()" action="targetFile.php"> 
 
    <input type="file" /> 
 
    <input type="submit" id="valider" name="valid" value="Forward" /> 
 
</form>

は、私たちが必要とするこの技術を使用しますconfirmFormDialog()がfalseを返すことを確認してください。この方法では、入力ボタンがクリックされたときにHTMLフォームが送信されません。このデフォルトの動作を削除することにより、いつフォームを提出するかを.submit()で決定します。

出典

2017-08-23 11:50:34 Ivan

はあなたがsubmiitingしている任意の形式がありますForwardボタン

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 

 
<div id="dialog" title="Box"></div> 
 
<p>Welcome...!</p> 
 
<input type="file" /> 
 
<input type="submit" id="valider" name="valid" value="Forward" /> 
 
<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    document.getElementById("valider").addEventListener("click",function(){ 
 
    $("#dialog").dialog({ 
 
     modal: true, 
 
     buttons: { 
 
     Yes: function() { 
 
      $(this).dialog("close"); 
 
     }, 
 
     No: function() { 
 
      console.log('clicked no'); 
 
     } 
 
     } 
 
    }); 
 
    }); 
 
}); 
 
</script>

出典

2017-08-23 12:06:37

のデフォルト値の色がうまく表示されないため、ダイアログボックスの背景色を変更することは可能ですか？ダイアログボックスが表示されない – John

'head'タグではダイアログボックスの色が黄色に変わります。 –

ボタンをクリックしたときにダイアログボックスを表示する方法

答えて

関連する問題