JANELA MODAL JQUERY ASP.NET

JOAOBENEVIDES 03/08/2015 08:49:12
#449487
Ola Pessoal Gostaria de saber se alguem tem um exemplo simples de modal em jquery para asp .net , quero informar o usuario de alguma informação em telas modal

Obrigado


Joao
TUNUSAT 03/08/2015 10:46:15
#449491
JOAOBENEVIDES,

Por favor, veja se algum destes links te ajuda:

================================================
ASP.NET MVC e jQuery UI: Desenvolvendo um CRUD com janelas modais
http://www.devmedia.com.br/asp-net-mvc-e-jquery-ui-desenvolvendo-um-crud-com-janelas-modais/31867
<script> 

   $(function () { 

      $([Ô].btn-create[Ô]).click(function () { 
         $([Ô]#modal[Ô]).load([Ô]/clientes/create[Ô]).attr([Ô]title[Ô], [Ô]Adicionar cliente[Ô]).dialog(); 
      }); 

      $([Ô].btn-details[Ô]).click(function () { 
         var codigo = $(this).attr([Ô]data-codigo[Ô]); 
         $([Ô]#modal[Ô]).load([Ô]/clientes/details/[Ô] + codigo).attr([Ô]title[Ô], [Ô]Dados do cliente[Ô]).dialog(); 
      }); 

      $([Ô].btn-edit[Ô]).click(function () { 
         var codigo = $(this).attr([Ô]data-codigo[Ô]); 
         $([Ô]#modal[Ô]).load([Ô]/clientes/edit/[Ô] + codigo).attr([Ô]title[Ô], [Ô]Editar cliente[Ô]).dialog(); 
      }); 

      $([Ô].btn-delete[Ô]).click(function () { 
         var codigo = $(this).attr([Ô]data-codigo[Ô]); 
         $([Ô]#modal[Ô]).load([Ô]/clientes/delete/[Ô] + codigo).attr([Ô]title[Ô], [Ô]Excluir cliente[Ô]).dialog(); 
      }); 

   }); 
</script>

================================================
jQuery ASP.NET: criando uma tela modal para edição de Grid
http://www.devmedia.com.br/jquery-asp-net-criando-uma-tela-modal-para-edicao-de-grid/30339
================================================
ASP.NET MVC e Bootstrap - Exibindo views modais
http://www.linhadecodigo.com.br/artigo/3686/aspnet-mvc-e-bootstrap-exibindo-views-modais.aspx
================================================
jQuery UI
http://jqueryui.com/dialog/
http://jqueryui.com/dialog/#modal-form
<!doctype html>
<html lang=[Ô]en[Ô]>
<head>
  <meta charset=[Ô]utf-8[Ô]>
  <title>jQuery UI Dialog - Modal form</title>
  <link rel=[Ô]stylesheet[Ô] href=[Ô]//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css[Ô]>
  <script src=[Ô]//code.jquery.com/jquery-1.10.2.js[Ô]></script>
  <script src=[Ô]//code.jquery.com/ui/1.11.4/jquery-ui.js[Ô]></script>
  <link rel=[Ô]stylesheet[Ô] href=[Ô]/resources/demos/style.css[Ô]>

  <style>
    body { font-size: 62.5%; }
    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>

  $(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: 300,
      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>
</body>
</html>


================================================
Abrir outra página em modal JQuery
http://pt.stackoverflow.com/questions/58142/abrir-outra-p%C3%A1gina-em-modal-jquery
================================================
ASP NET MVC 4 - How to Create A jQuery Modal Popup...
http://www.youtube.com/watch?v=jpg_2vLAJxc
================================================

[][ô]s,
Tunusat.
KERPLUNK 03/08/2015 17:54:47
#449506 Resposta escolhida
é bem simples, fiz este fiddle de exemplo pra você. Ele utiliza JQueryUI, que tem várias funcionalidades além dessa de janelas de diálogo e funcionam perfeitamente com ASP.NET
Tópico encerrado , respostas não são mais permitidas
Voltar