モーダルの反応を隠す

私のモーダルを隠して助けが必要です。私のボタンonclickには、私のポップアップウィンドウを開くshowModal()の機能を内蔵しています。 showModal()が既に存在しているので、私はhideModal()のような同じような組み込み関数があると仮定しました。モーダルの反応を隠す

エスケープキーを押すとウィンドウが閉じるので、ESCキーを押したときに何が起こるのか不思議です。これは、それを表示するための私の関数である。

modal(e) { 
    e.preventDefault(); 
    document.getElementById("myDialog").showModal(); 
}

そして、ここでは/非表示を表示しようとしている要素のイムです：

<dialog id="myDialog"> 
    Namn: 
    <input className="modalInput" /><br /> 
    Ålder: 
    <input className="modalInput" /><br /> 
    Ras: 
    <input className="modalInput" /><br /> 
    Beskrivning: 
    <textarea /><br /> 

    <button className="confirmBooking" onClick= 
    {this.bookingBtn}>Boka</button> 
    <button className="closeModal" onClick={this.closeModal}>X</button><br 
    /> 
    {this.state.bokning} 



    </dialog>

出典

2017-06-12 smuckert

、（近いと試みる）のonClick = {this.close（）} このボタンはINSIDEモーダルでなければなりません。 –

申し訳ありませんが、私はこれは、角度はなかった忘れてしまいました。編集された：これは純粋なHTML、ダイアログのオプションである、あなたはモーダルのようにそれを使用することができます：ここで

あなたはモーダルを開閉する方法の簡単な例を持っている：

<!DOCTYPE html> 
<html> 
<body> 

<p>Click the button to show the dialog.</p> 

<button onclick="openthis()">Show dialog</button> 

<p><b>Note:</b> Use the "Esc" button to close the modal.</p> 
<p><b>Note:</b> The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.</p> 

<dialog id="myDialog">This is a dialog window 
<button onclick="closethis()">close dialog</button> 
</dialog> 

<script> 
function openthis() { 
    document.getElementById("myDialog").showModal(); 
} 

function closethis() { 
    document.getElementById("myDialog").close(); 
} 
</script> 

</body> 
</html>

コピー、ペースト状にnew.htmlとチェック。ほしいと思っています。

also here´s a fiddle in react showing how to show and hide a div --from user @jan klimo簡単

出典

2017-06-12 09:21:45

$ scope.closeModal = function（）{ $ scope.modal.hide（）; } このjqueryはありますか？私は反応でこれをやろうとしているので、その場合はうまくいきません。返信ありがとう – smuckert

OPはangularjs答えを探していません。 –

@FooBarが復帰しました。ありがとうございました –

答えて

関連する問題