Anguarjs: ui-router modal window to return to previous state, without re-entering it

With angularjs and ui-router, on top my main state I'd like to open a modal window, which will cover it. The modal window needs to:

  1. cover the main state without changing it
  2. when closing the modal window, it needs to uncover the main state without re-entering it (e.g. not change the scroll position, form input values etc).

How can this be done?

Firstly, I assume you are using an Angular modal library such as http://mgcrea.github.io/angular-strap/#/modals#modals, or similar?

With regards to UI-Router, it depends on your exact requirements, but commonly you wouldn't need to create a separate UI state for your popup. If in fact you find that you do, then maybe consider using the onEnter method of the UI state definition to display your popup, or activating it from the state's controller.

Then, once you've got your modal window working, you can style it so it completely covers the viewport. Something like the following CSS might fulfil your first requirement:

.modal {
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom: 0;
}

By definition, a modal will not effect what is behind it - all state should remain the same - so as long as your modal implementation is sound (use a good library!) then your second requirement should be satisfied automatically.