Question

这里有一个问题，请删除＃的网址。

我有一个模式，当我打开它使用我的代码，我的网址扩展扩展像这样#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. 关闭模式，但在网址上，#mymodalid应该删除一次关闭。
4. 即使我关闭的模态，我被检查应保留

我需要删除#mymodalid，因为当我重定向到页面本身在提交时，进行模态的，因为那＃弹出

任何人，请帮助我。

Answer 1

添加一个回调到您的hide()功能：

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

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

或者您也可以只内联回调，但它的功能显然是可重复使用的：

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

PS：400是默认速度为jQuery的hide()。