Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 575
  • Last Modified:

equivalent jquery code for modal popup generation

Hi;

I am in a JS function and using the following line:

var flag = confirm('You have changed the value. Proceed?');

Open in new window


which works fine, but i need a little fancier jquery without any major changes (a one liner like this maybe?)

Any hand?

Regards.
0
jazzIIIlove
Asked:
jazzIIIlove
  • 5
  • 3
  • 2
3 Solutions
 
Russ SuterCommented:
Not sure why you need to do something in jQuery when you say the basic Javascript works fine.

You're not going to find a one line jQuery solution. They didn't write a substitute because the confirm dialog works just fine.

They do have an enhanced dialog option as part of the jQuery UI that offers more functionality and it's quite easy to use.

Details can be found here: https://jqueryui.com/dialog/
0
 
jazzIIIloveAuthor Commented:
Hi,

I understand. Can you help with simple yes/no or Ok/Cancel dialog like that?

Regards.
0
 
Russ SuterCommented:
Here's a basic example taken right from the jQuery UI site. It has everything you need to get started. All you need to do is download the jQuery UI, reference it, and change the wording of the dialog example below to suit your needs.

<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</body>
</html>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
jazzIIIloveAuthor Commented:
Hi;

Thanks. I have already JQuery lib included.
So, what i need is to grab the flag value in which I put the above JS in my javascript tag.

So how can I set my
var flag = 

Open in new window

to the following code? i mean where?

<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>

Open in new window

0
 
Russ SuterCommented:
You not only need the jQuery library but also the jQuery UI library.

You would set the variable in the function for the appropriate button so it might look something like this:

<script>
var flag = false;
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"OK": function() {
flag = true;
$( this ).dialog( "close" );
},
Cancel: function() {
flag = false;
$( this ).dialog( "close" );
}
}
});
});
</script>

Open in new window

0
 
jazzIIIloveAuthor Commented:
Hi Russ_Suter;

Is there a typo in the you js code?
"OK" is surrounded by " whereas Cancel is not.
0
 
jazzIIIloveAuthor Commented:
Obviuosly I needed to put the relevant div, in my front. But the problem is that now, my dialog is disappearing automatically after the appear. what to do?
0
 
Pravin AsarPrincipal Systems EngineerCommented:
Here is simple and complete code.

<!DOCTYPE html>
<html>
<head>
      <title>Modal Pop up Sample</title>
      <script type="text/javascript">
            function ShowHidePopup()
            {
                  
                  if (document.getElementById('Fade').style.display == 'none') {
                  document.getElementById('Fade').style.display=document.getElementById('ModalPop').style.display='block';                        
                  }
                  else {
                  document.getElementById('Fade').style.display=document.getElementById('ModalPop').style.display='none';                  
                  }
            }
      </script>
      <style type="text/css">
            div.Fade {
                  width:100%;
                  height: 100%;
                  z-index: 90;
                  background-color: #fcfcfc;
                  position: absolute;
                  left:0%;
                  top:5%;  
                  margin-left: auto ;
                  margin-right: auto;
            }
            div.ModalPop {
                  width:80%;
                  height: 100%;
                  border: #000 solid 2px;
                  z-index: 100;
                  background-color: #F0F0F0;
                  position: absolute;
                  left:10%;
                  top:5%;
                  margin-top: auto;
                  margin-left: 20px;
                  margin-right: 20px;
                  vertical-align: top;            
            }
      </style>
</head>
<body>
<a href="#" onclick="ShowHidePopup()">Show Hide Pop up</a>      

<div id="Fade" class="Fade" style="display:none;">&nbsp;</div>

<div id="ModalPop" class="ModalPop" style="display: none;">
      <span style="float:right;text-align: right; width:100%; background-color: #000; color:#fff; font-size: 40px;"  onclick="ShowHidePopup()">X</span>
</div>
</body>
</html>
0
 
Pravin AsarPrincipal Systems EngineerCommented:
You can customize (add appropriate elements) and code with ModalPop div box.
0
 
jazzIIIloveAuthor Commented:
Hi;

Apparently,
event.preventDefault(); is my solution.

Thanks guys.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now