单击后如何保持模态打开？

Question

我的问题是不同的，没有得到任何解决方案。问题是当我单击活动模式打开 1 秒，然后页面刷新并将状态更改为活动状态时。 我想在单击活动时保持模态打开，然后在点击从模态页面发送后重新加载并将状态更改为非活动状态。

我的模态：

  <div class="modal fade text-left" id="small" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel19"
     aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <form method="post">
                <input type="hidden" name="_token" value="{{csrf_token()}}">
                <div class="modal-header">
                    <h4 class="modal-title" id="heading-name">Reason</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="receiver" for="to">To: </label>
                    </div>
                    <div class="form-group">
                        <textarea type="text" class="form-control" name="message" id="message"></textarea>
                    </div>

                </div>
                <input type="hidden" name="message_value" id="message_value">
                <div class="modal-footer">
                    <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">
                        Close
                    </button>
                    <button type="submit" class="btn btn-outline-primary" data-target="myModalLabel19"
                            data-toggle="modal">Send
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

For循环：

 for (var i = 0; i < response.data.length; i++) {

          if (response.data[i]['status'] == 1) {
                  operatorStatus = "Active";
                  statusColor = "<button class='btn btn-primary'  onclick='fn_statusUpdate("+response.data[i]['id']+",0);reason("+response.data[i]['id']+")'>Active</button>";
         } else {
               operatorStatus = "Active";
               statusColor = "<button class='btn btn-danger' onclick='fn_statusUpdate("+response.data[i]['id']+",1)'>Inactive</button>";
               }
    }

功能：

     function reason(id) {

        $('.receiver').text('To: ' + id);

        $('#message_value').val(id);
        console.log((JSON.stringify(id)));


        $('#small').modal('show');

    }

Answer 1

伪代码

好的，与其为您重新编写代码，我只是为您编写一些伪代码，仅仅因为我不确定它是如何工作的或如何将它们联系在一起，等等......

因此，据我所知，您希望能够做一些事情并记住页面刷新之前的值。 所以，我会做这样的事情......

负载

...

if (sessionStorage.getItem('key') != null) {
   // Show modal or set state to active or whatever...
} else {
   // Hide modal and set state to inactive or whatever... 
}

关于状态变化

....

if (state.active) {
    // Do something...
} else {
    // Do something else...
}

解释

我想你明白我要去哪里了吗？ 如果不是，那真的很简单，如果您在会话存储中存储了一些值，那么您可以将状态设置为活动并显示模态。 我的意思是我认为这就是你想要达到的目标？

否则，只需将其全部隐藏并将状态设置为非活动。 我的意思是如果你有很多模态，那么你可以使用我在下面写的代码之类的东西将一个对象存储到会话存储中（请记住我没有测试过这段代码）：

const Session = {
    get: key => {
    try {
        JSON.parse(sessionStorage.getItem(key));
    } catch (e) {
        return sessionStorage.getItem(key);
    }
    },

  set: (key, data) => {
    try {
        sessionStorage.setItem(key, JSON.stringify(data));
    } catch (e) {
        sessionStorage.setItem(key, data);
    }
  }
};

所以有了这个，你可以在你的 JavaScript 中设置一些对象，即modalStates ，然后在加载时执行一些检查来检查每个模态的状态？ 我的意思是我不确定您是否只想在任何给定时间只允许一个模式处于活动状态，或者您是否希望多个模式处于活动状态并打开等...

编辑

这是一个简单的演示，如果我没记错的话，它不会在这里工作，但是如果您在JSFiddle上尝试，我相信它应该可以正常工作。 同样，这只是一个例子，它只是为了让您了解如何解决您的问题。

 const dhtml = document.getElementById("demo"); const modal = document.getElementById("mdoal"); const btn = document.getElementById("change"); let state = {}; // Simple on error function. const log = arg => { console.clear(); console.log(arg); }; // Simple get state function. const getState = () => { try { if (JSON.parse(sessionStorage.getItem("demo")) != null) { state = JSON.parse(sessionStorage.getItem("demo")); } else { state = {}; } } catch (e) { //log(e); } return state; }; // Simple set state function. const setState = () => { try { state = sessionStorage.setItem("demo", JSON.stringify(state)); } catch (e) { //log(e); } }; // A simple on state change function. const updateState = () => { if (state.active == null) { state.active = true; } else { state.active = !state.active; } setState(); log('State changed.'); }; // A simple render function. const render = () => { if (state.active == null || state.active == false) { dhtml.textContent = 'Inactive'; modal.style.display = 'none'; } else { dhtml.textContent = 'Active'; modal.style.display = 'block'; } }; // A simple click handler for the change button. const clickHandler = () => { updateState(); getState(); render(); // window.location.reload(); // Simulate a http refresh/redirect. }; // A simple on load function. const onLoad = () => { getState(); // Update the state object. render(); // Initial render; btn.onclick = clickHandler; }; onLoad();

 <div id="demo"> <p>Inactive</p> </div> <div id="mdoal" style="display: none"> <p>Hello World!</p> </div> <button id="change">state change</button>

Answer 2

您基本上可以使用localStorage来实现这一点，您没有完整的代码，所以我假设并给您一个示例：

 function reason(id) {

     $('.receiver').text('To: ' + id);

     $('#message_value').val(id);
     console.log((JSON.stringify(id)));

     localStorage.setItem('isModalActive', '1'); // Add is modal active

     $('#small').modal('show');
    }

所以现在你将isModalActive 1设置为用户 localStorage ，你可以检查onload

$( document ).ready(function() {
    if(localStorage.getItem('isModalActive') == '1'){
     $('#small').modal('show');
    }
}); 

比关闭模式时不要忘记将值更改为 0

     localStorage.setItem('isModalActive', '0'); // Add is modal not Active

希望能帮助到你。