JQuery Modal Popup

Je suis d'essayer d'avoir un modalpopup apparaissent une fois qu'un bouton a été cliqué sur un asp.net page.

   <%@ Control Language="C#" AutoEventWireup="true" CodeFile="TestFile.ascx.cs" Inherits="TestFile" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.IO" %>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
        <script type="text/javascript"> 

                function fnmodalpopup() {
        $( "#dialog-modal" ).dialog({
            height: 140,
            modal: true
});
        </script>
    </head>

    <!--Misc functions for operations -->
    <script runat="server" type="text/javascript">

    </script>

    <div id="dialog-modal" title="Basic modal dialog">
        <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
    </div>

    <asp:Button ID="Button1" runat="server" Text="Button" />

Je suis en train de créer une boîte de dialogue exactement comme http://jqueryui.com/demos/dialog/#modal, mais a déclenché une asp.net formulaire en cliquant sur un bouton. La page clignote et rien ne s'affiche.

Tout commentaire serait très utile!

Quel est votre problème? Quelle est votre question
Où en êtes-vous de la définition de votre variable $dialog?

InformationsquelleAutor Sc0rpio | 2012-07-24

4

Vous devez utiliser OnClientClick et d'empêcher la publication avec return false comme ceci:
```
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return fnmodalpopup()" />

function fnmodalpopup() {   
    $( "#dialog-modal" ).dialog({
        height: 140,
        modal: true
    });
    return false;
});
```
Edit:

J'ai changé OnClientClick="retour fnmodalpopup()"

Maintenant, il fonctionne bien (au moins quand je l'ai testé).

Juste par curiosité, pourquoi voulez-vous utiliser des composants côté serveur si vous ne souhaitez pas créer de publication? Si il n'y a pas de situation lorsque ce bouton pour faire la publication, peut-être qu'il serait préférable d'utiliser le bouton html de la balise (ou tout autre balise html et attraper "cliquez sur" événements avec jQuery). Il n'a pas d'importance si vous utilisez asp.net les contrôles sur le reste de la page.
- Essayé ta suggestion, juste réinitialiser la page d'origine de position. Pas de pop-up.
- Bon, cela fonctionne maintenant. Quelqu'un s'il vous plaît voter Goran (comme je n'ai pas assez de réputation). Merci!
InformationsquelleAutor Goran
1

Dans Asp.Net Si vous faites glisser un gestionnaire de script sur la page, et mettre le bouton à l'intérieur d'un panneau de mise à jour de Contenu du Modèle de balise, puis aussi cela fonctionne correctement. Parce que l'Ajax panneau de mise à jour empêche la publication par défaut sous les couvertures en asp.net le bouton de OnClientClick fonctionne correctement pour afficher le jquery popup. Mais c'est surtout utile dans les cas où le bouton est partie d'un ensemble de contrôles fournissant une riche expérience côté client, plutôt que de les afficher en arrière tout le temps (par exemple, Dans un usercontrol qui fournit à un client interactif côté du panneau de contrôle).

InformationsquelleAutor
0

essayez de changer
```
       <asp:Button ID="Button1" runat="server" Text="Button" />
```
à:
```
      <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="fnmodalpopup();" />
```
alors:
```
function fnmodalpopup() {   
    $( "#dialog-modal" ).dialog({
        height: 140,
        modal: true
    });
});
```
- Bon, j'ai changé. Encore qu'actualise la page.
- Dois-je mettre le bouton dans un UpdatePanel?
- non, le bouton de travailler n'importe où , vous pourriez avoir à regarder jusqu'à "arrêter asp:Bouton à partir de la publication" bien qu'il peut être préférable d'utiliser <input type=button > que l'on va travailler pour vous , je ne suis pas sûr si vous avez été la planification sur handeling l'événement click dans le code-behind, bien qu'après la boîte de dialogue modale - donc, je ne sais pas ce qui est le mieux pour vous
InformationsquelleAutor Scott Selby
0

De l'essayer. Il empêche le post de retour à l'aide de jQuery. J'ai eu des problèmes avec le return false méthode dans le passé.
```
$(function () {
    $("[id$=Button1]").click(function () {
        //prevent the default action, e.g., following a link
        event.preventDefault();
        $dialog.dialog('open');
    });
});
```
Également envisager d'utiliser une autre HTML de l'objet si l'ASP.Net la fonctionnalité n'est pas nécessaire pour le clic sur le bouton. Il peut nettoyer des trucs un peu et vous évite d'avoir à se battre avec le serveur.
- Je suppose que je n'ai pas besoin de cette fonction, que je peux utiliser un événement onclick. De bonnes idées cependant.
- Est-il une raison pour laquelle vous êtes à l'aide de l'asp:button? Ie est-il un serveur de côté la logique qui est en train de faire aussi bien?
InformationsquelleAutor PCasagrande

Essayer cette

 $(function () {
        modalPosition();
        $(window).resize(function () {
            modalPosition();
        });
        $('.openModal').click(function (e) {
            $('.modal, .modal-backdrop').fadeIn('fast');
            e.preventDefault();
        });
        $('.close-modal').click(function (e) {
            $('.modal, .modal-backdrop').fadeOut('fast');
        });
    });
    function modalPosition() {
        var width = $('.modal').width();
        var pageWidth = $(window).width();
        var x = (pageWidth / 2) - (width / 2);
        $('.modal').css({ left: x + "px" });
    }

Se référer:- Modal popup à l'aide de jquery dans asp.net

InformationsquelleAutor Rameshbl

<div class="container">
<div class="row">
<center><h2>Product Information</h2></center>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<input type="text" id="txtpname" placeholder="Product Name" class="form-control">
</div>
<div class="form-group">
<input type="text" id="txtpprice" placeholder="Product Price" class="form-control">
</div>
<input type="submit" id="btninsert" value="Insert" class="btn btn-primary">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5">
<table id="ProductTable" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<td>ID</td>
<td>Product Name</td>
<td>Product Price</td>
<td>Action</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div id="mmd" class="modal fade" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<h3>Update Product</h3>
</div>
<div class="modal-body">
<input type="hidden" id="hdnID" value="0" />
<div class="form-group">
<input type="text" id="txtuppname" placeholder="Product Name" class="form-control">
</div>
<div class="form-group">
<input type="text" id="txtuppprice" placeholder="Product Price" class="form-control">
</div>
</div>
<div class="modal-footer">
<input type="submit" id="btnupdate" value="Update" class="btn btn-primary">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

Veuillez également fournir une explication comment cela résout le problème

InformationsquelleAutor Krishna Jadhav

Vous devez vous connecter pour publier un commentaire.