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 (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...
}

说明

我想你明白我的意思了吗？如果不是真的很简单，如果会话存储中存储了一些值，则可以将状态设置为active并显示模式。我的意思是我认为这就是您要实现的目标？

否则，只需将其全部隐藏并将状态设置为非活动即可。我的意思是，如果您有很多模态，则可以使用类似于我在下面编写的代码将对象存储到会话存储中（请记住，我尚未测试此代码）：

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');
    }

因此，现在您为用户localStorage设置 isModalActive 1 ，可以检查 onload

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

比当您关闭模态时，别忘了将值更改为0

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

希望有帮助。

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

2 个答案:

伪代码

说明

编辑