モーダルポップアップと提出時にURLを＃削除する方法

Question

ここに問題があります。

私はモーダルを持っています。コードを使用して開くと、私のURLの拡張子は次のようになります#mymodalid。私がする必要がどのような

$(document).on("click", "input[name='txt1']", function() { 
 
    $('#modal1').show(); 
 
}); 
 

 
$(document).on("click", "input[name='txt2']", function() { 
 
    $('#modal2').show(); 
 
}); 
 

 
$(document).on("click", ".btn1", function() { 
 
    if ($('#modal1 :checkbox:checked').length > 1) { 
 
    $('input[name=txt1]').val('multiple'); 
 
    } else { 
 
    $('input[name=txt1]').val($('#modal1 :checkbox:checked').prev('label').text()); 
 
    } 
 

 
    $('#modal1').hide(); 
 
}); 
 

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

 
$(".radio").change(function() { 
 
    $(".radio").prop('checked', false); 
 
    $(this).prop('checked', true); 
 
});

/* 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=""> 
 

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

 
    <br> 
 
    <br> 
 

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

 
    <!-- modal starts here --> 
 
    <div class="modalwrapper" id="modal1"> 
 
    <!-- 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 --> 
 

 

 
    <div class="modalwrapper" id="modal2"> 
 
    <!-- modal --> 
 
    <div class="modalcontainer"> 
 
     <div class="modalcol1"> 
 
     <label>Mango</label> 
 
     <input class="radio" type="checkbox" name="fruit1" value="1"> 
 
     <div class="clear"></div> 
 
     <label>Banna</label> 
 
     <input class="radio" type="checkbox" name="fruit2" value="2"> 
 
     <div class="clear"></div> 
 
     <label>Grapes</label> 
 
     <input class="radio" type="checkbox" name="fruit3" value="3"> 
 
     <div class="clear"></div> 
 
     <div class="savebutton"> 
 
      <button class="btn2" type="button" value="Submit">Submit</button> 
 
     </div> 
 
     </div> 
 
     <!-- close modalcol1 --> 
 
    </div> 
 
    <!-- close modalcontainer --> 
 
    <div class="overlay"></div> 
 
    </div> 
 
    <!-- close modalwrapper --> 
 
</form>

ということである：それは私のプログラムに必要と

1. はモーダルを表示します。
2. いくつかのチェックボックス
3. をチェックモーダルを閉じますが、URLに、はが一度近い削除する必要があります#mymodalid。
私は維持する必要がありますチェックしたものをモーダルを閉じた場合でも
私は提出時にページ自体にリダイレクトする場合、モーダルは、そのせいで＃でポップアップしますので #mymodalidを削除する必要が

誰でも、私を助けてください。

Answer 1

あなたhide()関数にコールバックを追加します。

$('#modal1').hide(400, removeHashFromUrl()); 

function removeHashFromUrl() 
{ 
    window.location.hash = ''; 
} 

それとも、ただ単にコールバックをインライン可能性があり、それが機能して、明らかに再利用可能です：

$('#modal1').hide(400, function(){window.location.hash = '';}); 

PS：400はデフォルトですがjQueryのhide()の速度。