forms – The location of the action buttons is different for the modals of the basic screens

I am in the process of redesigning a product for iPad and Windows and I am currently looking at how the buttons are placed in the application.

Basic screen

This is what a generic "basic screen" looks like. Nothing special, just a navigation with some actions aligned to the right, with the content appearing below. The content is editable. Therefore, when you edit it, you must save it by clicking the save button. Automatic backup beyond the scope of this.

basic screen

modal

When you click on one of the links in the navigation, a small modal appears, which contains a form to edit.

Current design

Currently, you fill out a form or modify it, then you accept or cancel your changes by pressing two icons in the top right corner of the modal. This has a number of immediately obvious limitations:

  1. The icons are ambiguous and must be accompanied by labels to clarify the meaning.
  2. Destructive (undo) action and (complete) constructive action are presented in a similar way (given the same level of visibility) and placed too close together.
  3. The actions appear after the form, so that the user fills the form up and down and then goes back up to activate it.

current modal

Proposed design

contested modal proposal

  1. The icons are replaced by buttons that clearly specify what each action does with a label.
  2. The Cancel and Finish buttons are separated and now have a different style, the most important one: the destructive "undo" action is styled only as a link, as opposed to "full" which is now a button. I hope this will encourage filling in the form rather than canceling it.
  3. The actions are now at the bottom of the form.

It was pointed out that it seems odd that for the basic screens, we have our actions before the form (the save button that saves the content below), while the design that I have proposed for the modals is at the bottom.

I see his argument although the reason is simply to save space. What these wired structures do not reflect, is the amount of content we have to fill in such a small space. It is therefore advisable to align the Save button on the main navigation. If we did not do this, we would have to sacrifice our content area by including a new line to accommodate a backup button and maybe one or two more buttons in the future. Seems hardly worth it.

My question is: did anyone encounter this problem and what did you do about it? Is my proposal acceptable given this inconsistency between the location of the buttons on the basic screen and the modals, or does it really need to be fixed?

  • User tests at this time are unfortunately out of reach.
  • Must work for the touch and the mouse.

javascript – The body blur feature does not work with multiple modals

Intro – I have created a modal window in which several modal windows can be opened on each other and closed one by one. I've recently added a blur feature in which, if a modal window is opened, the background of the body becomes blurred and if a second window is opened. , the body and the first window become blurred. And it follows the same concept when closing … Closing the second window makes the first window normal and closing the first window makes the normal body bottom.

For this particular question, I created 3 modals – The first has a button to trigger it, the second can be opened from the body of the first modal and the third modal has a button

The blur feature mentioned in the intro works well only for First & Second modal and does not work for the third modal. In modal third, the closing of the modal window does not make the bottom of the body unsharp, contrary to the first two modals.

(The third modal is just a minimal example to explain this problem, I wish ideally that it works with n number of modals)

Hope that someone can give an effective solution

I've included all 3 – html, css and javascript codes in snippets, though I'm sure it just requires a little JavaScript fit.

let open_modals = ();

$(function() {

  // Get the button that opens the modal
  // read all the control of any type which has class as modal-button
  var btn = document.querySelectorAll(".modal-button");

  // All page modals
  var modals = document.querySelectorAll('.modal');

  // Get the  element that closes the modal
  var spans = document.getElementsByClassName("close");

  // When the user clicks the button, open the modal
  for (var i = 0; i < btn.length; i++) {
    btn(i).onclick = function(e) {
      e.preventDefault();
      modal = document.querySelector(e.target.getAttribute("href"));
      modal.style.display = "block";
      open_modals.push(modal.id);
      document.body.style.overflow = "hidden";

      if (this.parentElement.parentElement.nodeName == 'BODY') {
        document.body.classList.add("open");
      } else {
        this.parentElement.parentElement.parentElement.classList.add("open");
      }
    }
  }

  function checkRenableScroll() {
    if (!open_modals.length) {
      document.body.style.overflow = "scroll";
    }
  }

  // When the user clicks on  (x), close the modal
  for (var i = 0; i < spans.length; i++) {
    spans(i).onclick = function() {
      for (var index in modals) {
        if (typeof modals(index).style !== 'undefined' && modals(index).id == open_modals(open_modals.length - 1)) {
          modals(index).classList.add("modal-content-active");
          var item = modals(index);

          if (index > 0) {
            var parentModal = spans(index - 1).parentElement.parentElement;
            parentModal.classList.remove("open");
            if (parentModal.getElementsByClassName('open').length > 0) {
              parentModal.getElementsByClassName('open')(0).classList.remove("open");
            }
          } else {
            document.body.classList.remove("open");
          }

          setTimeout(function() {
            item.classList.remove("modal-content-active");
            item.style.display = "none";
            open_modals.pop();
            checkRenableScroll();

          }, 400);
        }
      }
    }
  }

  //   When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
      for (var index in modals) {
        if (typeof modals(index).style !== 'undefined' && modals(index).id == open_modals(open_modals.length - 1)) {
          modals(index).classList.add("modal-content-active");
          var item = modals(index);

          if (index > 0) {
            var parentModal = spans(index - 1).parentElement.parentElement;
            parentModal.classList.remove("open");
            if (parentModal.getElementsByClassName('open').length > 0) {
              parentModal.getElementsByClassName('open')(0).classList.remove("open");
            }
          } else {
            document.body.classList.remove("open");
          }

          setTimeout(function() {
            item.classList.remove("modal-content-active");
            item.style.display = "none";
            open_modals.pop();
            checkRenableScroll();

          }, 400);
        }
      }
    }
  }
})



  
  
  



• first modal

The second modal can be triggered from the body of the first modal window
• third modal

@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

/* The Modal (background) */

.modal {
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 3.125rem;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  color: white;
  position: relative;
  background-color: #171B20;
  margin: auto;
  padding: 0;
  border: 0.0625rem solid #888;
  width: 90%;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2), 0 0.375rem 1.25rem 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}


/* Add Animation */

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@-webkit-keyframes animateBottom {
  from {
    top: 0px;
    opacity: 1;
  }
  to {
    top: 500px;
    opacity: 0;
  }
}

@keyframes animateBottom {
  from {
    top: 0px;
    opacity: 1;
  }
  to {
    top: 300px;
    opacity: 0;
  }
}

.modal-content-active {
  -webkit-animation-name: animateBottom;
  -webkit-animation-duration: 0.4s;
  animation-name: animateBottom;
  animation-duration: 0.4s;
}


/* The Close Button */

.close {
  color: #F0B823;
  float: right;
  font-size: 2.6rem;
  font-weight: bold;
  position: absolute;
  right: 0.25rem;
  top: -0.25rem;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 0.125rem 1rem;
  background-color: #171B20;
  color: #F0B823;
}

.modal-body {}

.modal-button {
  font-family: 'Quicksand', sans-serif;
  background-color: #171B20;
  border: none;
  color: white;
  padding: 0.248em 0.496em;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 1.750rem;
  margin: 0.124em 0.062em;
  -webkit-transition-duration: 0;
  /* Safari */
  transition-duration: 0;
  cursor: pointer;
  width: auto;
}

.modal-button:hover {
  background-color: #171B20;
  color: #F0B823;
}

.pic {
  margin: auto;
  display: block;
  height: auto;
  width: 50vh;
}

.headertext {
  font-family: 'Quicksand', sans-serif;
  display: block;
  text-align: center;
  font-size: 2rem;
}

.bodytext {
  font-size: 1.125rem;
  font-family: 'Quicksand', sans-serif;
  display: block;
  padding: 0.625em 0.9375em;
  line-height: 2rem;
}

p {
  display: block;
  margin: 0;
  padding: 0;
}

.open>* {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.modal {
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
}

.modal .open {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.bold {
  display: inline-block;
  font-weight: 900;
}

usability – Best practices: Position of the cancel button in modals

I am currently working on modals for our software and have always placed the "Cancel" button on the far left (version A in picture). However, while documenting more about modals, I discovered that most websites seemed to bring the main button closer to the right button (version B in the image). Is there a particular reason for conviviality for which the second option is more adopted? I do not know if I should keep version A or not. Thank you to everyone who will answer!

modal options

Positioning buttons on modals – should it be consistent at ALL times?

I am currently designing an application for iPad.

I have illustrated the situation below:Problem of the type of image

The screen on the left is the current version that seems to work very well when the user does not have to use the keyboard or if there are only one or two text fields (the modal window is short enough for the keyboard "button).

Currently, when the keyboard overlaps the window (middle image), I move the "Create" button in the upper right corner so that the main button is not obstructed.

  • Should I change the middle version of the image to the right one in
    in order to be consistent?
  • Is there another solution to my problem?

Hi and sorry for the bad english;)

Should I use modals for advertising?

I have a website on which I want to advertise a specific product / service. Is it ok to use a modal that displays the product in gray on the rest of the screen or will it divert visitors?

Edit: The modal I plan to use will appear in the center of the screen and will cover the rest of the gray. The box will contain a coupon code for $ 50 off and a small Google ad. The box can be easily closed with the X button in the corner and clicking outside the box. It is mostly unobtrusive.