Open message in modal or in separate page?

Unfortunately I can’t provide visual examples now, I hope that’s not a problem.

The question is simple: we have an inbox, which displays all the private messages a user has received, nothing new so far. When the user wants to open/read one of the messages, what should happen?

  • Open the message in a modal(if so, where should it be positioned? On the side of the screen, or in the middle of it? It only counts on desktop though)
  • Open it in a new page. Obviously for this we need to create a separate page for viewing single messages.

I also thought about maybe doing both, but I’m so not sure.

I know many say modal are a “no-go” in general, but let’s put that aside for now.

I’ve been thinking about it probably for days, but I can’t make up my mind, so I’d appreciate if you helped me out a bit.

In your experience, which one do you think would be a better way of doing it?

Add button for a modal box in my navigation

I have the following navigation in my site.

enter image description here

The first 3 items are normal links to other pages in my site. The last orange link opens a modal box.

This is how I have written it in code

    <?php wp_nav_menu(['menu' => 'Main menu', "container" => "", "menu_class" => "desktop-menu"]); ?>     <a class="open-modal-registration passion-one bg-orange white" href="#">Einfach anmelden und kostenlos studieren</a> 

I have a menu that can be customized from the Control panel, and then the orange button is hardcoded.

enter image description here

Now comes my problem. I would like to be able to reorder the items in the navigation in a way that I can also reorder the orange button, and put it, lets say, between “Page #1” and “Page #2”.

To do this, I guess I would have to add it to my menu from the Control Panel, but I do not see any proper way to do this. All that can be added to the menu are

  • Custom links
  • Pages
  • Posts
  • Categories
  • Tags

And none of those elements seem the right one to define a button with such a functionality.

How could I solve this?

Using a modal to display a dynamic form?

So currently I am building an interface that consists of user created “Documents” which can have a variable number of “items” associated with it. The problem is that I am not sure what is the most ideal method to represent the aforementioned user workflows. Below is an early stage prototype which illustrates the issues.Would really appreciate any feedback on how I can improve the solution.

enter image description here

Feedback modal upon exiting beta

We’re releasing a new feature which will be beta tested. We’re exploring ways in which we can collect feedback about the feature and one way was to surface a modal if the user decides to opt-out of the beta. At this point, we would display a modal, with 2 questions, both optional.

enter image description here

If the user clicks “Submit feedback” the form data will be submitted and the user would be taken to the ‘old’ service. If the user clicks “Cancel” the modal will close and they will remain in the beta.

My question is, is it acceptable to surface a feedback modal at this point?, and should I include a third button which would allow the user to exit the beta without giving feedback?

Using Modal Pop up but it automatically refreshes page

I used the following technique to create a Modal Pop up on my SharePoint Page: https://jqueryui.com/dialog/#modal-form

It works create but when the Modal dialog screen appears, it refreshes on its own with out user input. By taking a look on the code, (I’m new so It could be staring me right in the phase), but I just don’t see it.

I input everything in a CEWP but I received an error stating “Forms” and scripts are not alowed. So I just took the script and form portion and embedded it. But the Modal dialog still showed…it just refreshes by itself.

Here is the code from that page:

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">   <link rel="stylesheet" href="/resources/demos/style.css">   <style>     label, input { display:block; }     input.text { margin-bottom:12px; width:95%; padding: .4em; }     fieldset { padding:0; border:0; margin-top:25px; }     h1 { font-size: 1.2em; margin: .6em 0; }     div#users-contain { width: 350px; margin: 20px 0; }     div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }     div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }     .ui-dialog .ui-state-error { padding: .3em; }     .validateTips { border: 1px solid transparent; padding: 0.3em; }   </style>   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>   <script>   $  ( function() {     var dialog, form,        // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29       emailRegex = /^[a-zA-Z0-9.!#$  %&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$  /,       name = $  ( "#name" ),       email = $  ( "#email" ),       password = $  ( "#password" ),       allFields = $  ( [] ).add( name ).add( email ).add( password ),       tips = $  ( ".validateTips" );      function updateTips( t ) {       tips         .text( t )         .addClass( "ui-state-highlight" );       setTimeout(function() {         tips.removeClass( "ui-state-highlight", 1500 );       }, 500 );     }      function checkLength( o, n, min, max ) {       if ( o.val().length > max || o.val().length < min ) {         o.addClass( "ui-state-error" );         updateTips( "Length of " + n + " must be between " +           min + " and " + max + "." );         return false;       } else {         return true;       }     }      function checkRegexp( o, regexp, n ) {       if ( !( regexp.test( o.val() ) ) ) {         o.addClass( "ui-state-error" );         updateTips( n );         return false;       } else {         return true;       }     }      function addUser() {       var valid = true;       allFields.removeClass( "ui-state-error" );        valid = valid && checkLength( name, "username", 3, 16 );       valid = valid && checkLength( email, "email", 6, 80 );       valid = valid && checkLength( password, "password", 5, 16 );        valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$  /i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );       valid = valid && checkRegexp( email, emailRegex, "eg. ui@jquery.com" );       valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$  /, "Password field only allow : a-z 0-9" );        if ( valid ) {         $  ( "#users tbody" ).append( "<tr>" +           "<td>" + name.val() + "</td>" +           "<td>" + email.val() + "</td>" +           "<td>" + password.val() + "</td>" +         "</tr>" );         dialog.dialog( "close" );       }       return valid;     }      dialog = $  ( "#dialog-form" ).dialog({       autoOpen: false,       height: 400,       width: 350,       modal: true,       buttons: {         "Create an account": addUser,         Cancel: function() {           dialog.dialog( "close" );         }       },       close: function() {         form[ 0 ].reset();         allFields.removeClass( "ui-state-error" );       }     });      form = dialog.find( "form" ).on( "submit", function( event ) {       event.preventDefault();       addUser();     });      $  ( "#create-user" ).button().on( "click", function() {       dialog.dialog( "open" );     });   } );   </script> </head> <body>  <div id="dialog-form" title="Create new user">   <p class="validateTips">All form fields are required.</p>    <form>     <fieldset>       <label for="name">Name</label>       <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">       <label for="email">Email</label>       <input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">       <label for="password">Password</label>       <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">        <!-- Allow form submission with keyboard without duplicating the dialog button -->       <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">     </fieldset>   </form> </div>   <div id="users-contain" class="ui-widget">   <h1>Existing Users:</h1>   <table id="users" class="ui-widget ui-widget-content">     <thead>       <tr class="ui-widget-header ">         <th>Name</th>         <th>Email</th>         <th>Password</th>       </tr>     </thead>     <tbody>       <tr>         <td>John Doe</td>         <td>john.doe@example.com</td>         <td>johndoe1</td>       </tr>     </tbody>   </table> </div> <button id="create-user">Create new user</button> 

Is it bad UX for a form to be presented in different formats (either in a modal or separate page), depending on context?

I’m designing an internal tool in which a user, at certain points, will need to fill out a fairly detailed form in order to add a piece of content to our user-facing platform.

However, the challenge I’m facing is that the form is available at different points in the user’s journey, and I’m wondering if I can format the presentation of the form differently (either as a modal or a separate page) depending on where the user is and what they’re doing, to cater to separate use cases. Namely, I’d like to present it within a modal when the user is on a page where they’ll be engaged with a different, priority task, but needs to quickly fill out the form to create a piece of content, and then resume with the main task.

But elsewhere in the tool, I’d like to present the form on a separate page when the user is on the page where all those content pieces live – so that when the user clicks a “+New Content” CTA, they’ll be taken to a separate page where they’ll fill out the form.

Ultimately, I’m trying to cater to these separate use cases with these different interactions, but is the resulting inconsistency bad? Trying to understand the tradeoff here.

I hope this all makes sense, thanks for taking a look!

What is the transluscent background of a modal dialog called?

These days it’s common for modal dialogs to also reduce the brightness of the background content, to make it clear that it can’t be interacted with. This is especially common on the web.

What is the name of the darkening behind the modal?

Example of a modal dialog

Since I’ve never known the standard name, I have resorted to a slightly silly name: sneezeguard.

Validacion de un formulario dentro de un Modal con Jquary, Ajax y Php

Deseo que mi Formulario que se encuentra dentro de mi Modal fuincione, pero no lo eh logrado, no se ejecuta ninguna de las opciones. deseo hacer un login de un administrador de la pagina la cual quiero que se efectue el fomrulario en el modal, buscando en la base de datos con php para ver si es valido el usuario. No me funciona pero tampoco en el inspector no me muestra ningun error, ni en el console me muestra el console.log que tengo en mi js.

<button type="button" id="ad"><img id="admi" src="img/admin.png"></button>

$  (function(){      $  ("#fmodal").on("submit", function (e) {         e.preventDefault();         $  .ajax({             url: "php/vale.php",             method: "POST",             data: $  (this).serialize(),             success: function (result) {                 console.log(result);                 if(parseInt(result)){                     console.log(result);                     window.location.href="admi.html"                 }else{                     console.log(result);                     alert("Usuario Invalido");                 }              }         });     }); }); 

Es Este mi codigo html del modal.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modal" tabindex="-1" role="dialog" id="modaladmin">         <div class="modal-dialog" role="document">             <div class="modal-content">                 <div class="modal-header" style="background-color: #970007;">                     <font size=2 color="white">                         <h5 class="modal-title" align="center">Iniciar Sesión</h5>                     </font>                 </div>                 <form method="POST" id="fmodal">                     <div class="modal-body">                     <p>Por favor, si es Administrador ingrese los siguentes datos:</p>                     <input type="text" name="adcor" id="adcor" placeholder="Usuario">                     <input type="password" name="contra" id=contra placeholder="Contraseña">                     </div>                     <div class="modal-footer" style="background-color: #F4F4F4;" align="center">                     <button type="submit"  id="mis">Siguiente</button>                 </div>             </form>              </div>         </div>     </div> 

Es etes mi codigo php para validar mi formulario con la base de datos

    <?php include "conexion.php"; $  link=conectarse();  $  usuario=$  _POST['adcor']; $  contraseña=$  _POST['contra'];  $  query ="SELECT * FROM Admin WHERE Usuario='$  usuario' AND Contraseña='$  contraseña'"; $  result=mysqli_query($  link, $  query); $  num_rows = mysqli_num_rows($  result);  if($  num_rows == 1){          echo 1;     }else{          echo 0;     }  mysqli_close($  link);   ?> 

Jumping to anchor within modal with a fixed header

Hi all,
I am having a bit of a problem.
I have a script that is for nested modals, that when a link is clicked it jumps straight to an anchor. It works fine.
However when styling, I would like to have a fixed header as the ".content" div scrolls to the anchor.
When ".content" has a height of 80vh it looks fine, but the script doesn't scroll to the anchor.
When ".content" has a height of 80% the script works, but the fixed header doesn't stay fixed and scrolls with the ".content".
How can I…

Jumping to anchor within modal with a fixed header