如何在模态弹出和提交时删除URL中的＃

Question

这里有问题。

我有一个模态，当我使用我的代码打开它时，我的网址扩展就像使用 #mymodalid 一样扩展。

＆＃13;

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我需要做的是：

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＆＃39; hide()的默认速度。