モーダルを閉じる/隠す

Question

私のモーダルを埋めた後、モーダルを閉じたり隠したりするのは難しいです。

投稿をクリックすると、テキストボックスがクリック可能なページに戻ることができます。一旦ページに戻ると、チェックボックスをもう一度開くとチェックボックスがオンになっているはずです。誰もがjavascriptものや他のソリューションでそれを行うことができます。

ブートストラップを使用する時間がありません。私のコードは以下のとおりです。私はちょうど私のモーダルを隠すか、または提出をクリックすると閉じる。ありがとう、ありがとう。

私の作業フィドル：https://jsfiddle.net/fe73awsu/

は、以下の私のコードを参照してください。

test.phpを

<form method="post" name="testform" action="#"> 

    <a href="#modal"> <!-- when the input textbox was clicked, modal will pop up --> 
     <input readonly type="text" name="txt1" placeholder="inputTest">   
    </a> 

    <div class="modalwrapper" id="modal"> <!-- modal --> 
      <div class="modalcontainer">  
       <div class="modalcol1"> 
        <label>Test 1</label> 
        <input type="checkbox" name="test_modal[]" value="1"> 
        <div class="clear"></div> 
        <label>Test 2</label> 
        <input type="checkbox" name="test_modal[]" value="2"> 
        <div class="clear"></div> 
        <label>Test 3</label> 
        <input type="checkbox" name="test_modal[]" value="3"> 
        <div class="clear"></div> 
        <label>Test 4</label> 
        <input type="checkbox" name="test_modal[]" value="4"> 
        <div class="clear"></div> 
        <label>Test 5</label> 
        <input type="checkbox" name="test_modal[]" value="5"> 
        <div class="clear"></div> 

        <div class="savebutton"> 
         <button class="btn1" type="button" value="Submit">Submit</button> 
        </div> 
       </div> <!-- close modalcol1 --> 
      </div> <!-- close modalcontainer --> 
     <div class="overlay"></div> 
    </div> <!-- close modalwrapper --> 
</form> 

modal.css

/* modal layout */ 
    .modalwrapper { 
     top: 0; 
     left: 0; 
     opacity: 0; 
     position: absolute; 
     visibility: hidden; 
     box-shadow: 0 3px 7px rgba(0,0,0,.25); 
     box-sizing: border-box; 
     transition: all .4s ease-in-out; 
     -webkit-transition: all .4s ease-in-out; 
     -moz-transition: all .4s ease-in-out; 
    } 

    .modalwrapper:target { 
     opacity: 1; 
     visibility: visible 
    } 

    .overlay { 
     background-color: #000; 
     background: rgba(0,0,0,.8); 
     height: 100%; 
     left: 0; 
     position: fixed; 
     top: 0; 
     width: 100%; 
     z-index: 1; 
    } 

    .modalcontainer { 
     display: table; 
     background-color: #777; 
     position: relative; 
     z-index: 100; 
     color: #fff; 
     padding: 5px; 
    } 

    .modalcol1 { display: table-cell; } 

    .clear { clear: both; } 

    .modalwrapper input[type=checkbox] { 
     float: right; 
     margin-right: 20px; 
    } 

    .savebutton input[type=submit] { 
     float: right; 
     background-color: maroon; 
     color: #fff; 
     border: none; 
     padding: 5px 10px; 
     margin-top: 5px; 
     margin-right: 20px; 
    } 
    /* modal layout ends here */ 

みんな、私を助けてください。

Answer 1

仲間を落ち着け、

このjsfiddleリンクをチェックしてください。

は、このコードをJS

$(document).on("click",".btn1", function(){ 
    $('#modal').hide(); 
    }); 

なぜそんなに深刻に追加しますか？

Answer 2

これを試してください。

<button class="btn1" type="button" value="Submit" on-click= submit();>Submit</button> 

//スクリプト

function submit() { 
    window.history.back(); 
} 

Answer 3

$(document).on("click",".btn1", function(){ 
 
    $('#modal').hide(); 
 
    });

/* modal layout */ 
 
    .modalwrapper { 
 
     top: 0; 
 
     left: 0; 
 
     opacity: 0; 
 
     position: absolute; 
 
     visibility: hidden; 
 
     box-shadow: 0 3px 7px rgba(0,0,0,.25); 
 
     box-sizing: border-box; 
 
     transition: all .4s ease-in-out; 
 
     -webkit-transition: all .4s ease-in-out; 
 
     -moz-transition: all .4s ease-in-out; 
 
    } 
 

 
    .modalwrapper:target { 
 
     opacity: 1; 
 
     visibility: visible 
 
    } 
 

 
    .overlay { 
 
     background-color: #000; 
 
     background: rgba(0,0,0,.8); 
 
     height: 100%; 
 
     left: 0; 
 
     position: fixed; 
 
     top: 0; 
 
     width: 100%; 
 
     z-index: 1; 
 
    } 
 

 
    .modalcontainer { 
 
     display: table; 
 
     background-color: #777; 
 
     position: relative; 
 
     z-index: 100; 
 
     color: #fff; 
 
     padding: 5px; 
 
    } 
 

 
    .modalcol1 { display: table-cell; } 
 

 
    .clear { clear: both; } 
 

 
    .modalwrapper input[type=checkbox] { 
 
     float: right; 
 
     margin-right: 20px; 
 
    } 
 

 
    .savebutton input[type=submit] { 
 
     float: right; 
 
     background-color: maroon; 
 
     color: #fff; 
 
     border: none; 
 
     padding: 5px 10px; 
 
     margin-top: 5px; 
 
     margin-right: 20px; 
 
    } 
 
    /* modal layout ends here */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" name="testform" action=""> 
 

 
\t <a href="#modal"> <!-- when the input textbox was clicked, modal will pop up --> 
 
\t \t <input readonly type="text" name="txt1" placeholder="inputTest"> \t \t 
 
\t </a> 
 

 
    <div class="modalwrapper" id="modal"> <!-- modal --> 
 
      <div class="modalcontainer">  
 
       <div class="modalcol1"> 
 
        <label>Test 1</label> 
 
        <input type="checkbox" name="test_modal[]" value="1"> 
 
        <div class="clear"></div> 
 
        <label>Test 2</label> 
 
        <input type="checkbox" name="test_modal[]" value="2"> 
 
        <div class="clear"></div> 
 
        <label>Test 3</label> 
 
        <input type="checkbox" name="test_modal[]" value="3"> 
 
        <div class="clear"></div> 
 
        <label>Test 4</label> 
 
        <input type="checkbox" name="test_modal[]" value="4"> 
 
        <div class="clear"></div> 
 
        <label>Test 5</label> 
 
        <input type="checkbox" name="test_modal[]" value="5"> 
 
        <div class="clear"></div> 
 

 
        <div class="savebutton"> 
 
         <button class="btn1" type="button" value="Submit">Submit</button> 
 
        </div> 
 
       </div> <!-- close modalcol1 --> 
 
      </div> <!-- close modalcontainer --> 
 
     <div class="overlay"></div> 
 
    </div> <!-- close modalwrapper --> 
 
</form>

Answer 4

<button type="button" id="close"class="btn green btn-default" data-dismiss="modal">Close <i class="fa fa-times" aria-hidden="true"></i></button> 

そのが働いていないのJavaScript

function onSave(){ 
$('#close').Click(); 
}