I use dialog() jquery for show dialogConfirm. position of it is left top. I want center.

Question

1.00/5 (1 vote)

See more:

look below code

<script src="@Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")"></script>
    <a href="#" id="deleteArticle" class="lnkDelete">hhhh</a>
     <style>

.ui-dialog-titlebar-close {
  visibility: hidden;
}
</style>
 <script>

     $(document).ready(function () {
         var url = "";
         $("#deleteArticle").click(function (e) {
             e.preventDefault();          
              url = $(this).attr('href');
              $("#dialog-confirm").dialog("open");             
     });

         $("#dialog-confirm").dialog({
             autoOpen: false,
             draggable: false,
             resizable: false,
             height: 200,
             width: 350,      
             show: { effect: "drop", direction: "up" },
            //modal: true,         
            /*open: function (event, ui) {
             $(".ui-dialog-titlebar-close").hide();
         },*/
         buttons: [
                   {
                       text: "yes", click: function () { window.location.href = url; /*$(this).dialog("close");*/ }
                   }
                  ,{
                      text: "no", click: function () {  $(this).dialog("close"); }
                   }
                  ]
             , position: { my: "center", at: "center", of: window}
     });

     });
</script>
<div id="dialog-confirm" style="display: none">
     <p>
        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
        Are you sure to delete?
     </p>
</div>

I don't understand what's problem?

Posted 21-Aug-14 7:44am

kave2011

Updated 24-Aug-14 1:58am

v8

Add a Solution

Comments

Ranjeet Patel 25-Aug-14 5:18am

did you try with removing the comment on the //modal: true,

kave2011 25-Aug-14 6:47am

yes

Ranjeet Patel 25-Aug-14 7:00am

Then you can do one thing.. this is extra solution.. because what i know about jQuery is is automatically shows the model in middle of the screen. but you can give one css class in your division.. which should have the property position : Center..
possitionCenter is your class which should have possession: center propery
<div id="dialog-confirm" class="possitionCenter" style="display: none">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
Are you sure to delete?
</p>
</div>

3 solutions

Solution 2

try

C#

$(".lnkDelete").click(function (e) {
       // e.preventDefault(); use this or return false
       $("#dialog-confirm").dialog("open");
       return false;
   });

instead of
using live.

or you can use .on in place of .live.
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
http://api.jquery.com/live/[^]

Posted 21-Aug-14 22:43pm

uspatel

Updated 21-Aug-14 22:47pm

v2

Comments

kave2011 22-Aug-14 16:01pm

thanks I edited it.
but position of it is left top. I want center.

kave2011 22-Aug-14 16:05pm

when I use true for modal I can't see dialog box and just I see a transparent grey page

uspatel 25-Aug-14 1:08am

check your CSS,It may be due to wrong CSS.

Solution 1

The usage sample is shown here: http://jqueryui.com/dialog[^].

First thing that caught my eye is this: you included jquery-ui-1.8.20.min.js, but not jQuery itself. Pay attention for the two lines <script src="....js"></script> in the code sample shown above.

—SA

Posted 21-Aug-14 8:37am

Sergey Alexandrovich Kryukov

Comments

kave2011 21-Aug-14 14:45pm

excuse me I edit it.

Sergey Alexandrovich Kryukov 21-Aug-14 16:01pm

Did you succeed, or not yet?
—SA

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

kave2011 · Accepted Answer · 2014-08-26T03:52:00

Solution 3

I use jQuery UI Helpers for mvc and by below code you can to install it.

Install-Package jQueryUIHelpers.Mvc5

Install-Package jQueryUIHelpers.Mvc4

Install-Package jQueryUIHelpers.Mvc3

It's very good and perfect.
all of my problems in jquery-ui solved.
tutorial for use it[^]

Posted 26-Aug-14 3:52am

kave2011