Solved

equivalent jquery code for modal popup generation

Posted on 2014-04-22
10
492 Views
Last Modified: 2014-04-24
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
Comment
Question by:jazzIIIlove
  • 5
  • 3
  • 2
10 Comments
 
LVL 20

Expert Comment

by:Russ Suter
ID: 40015224
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
 
LVL 12

Author Comment

by:jazzIIIlove
ID: 40015248
Hi,

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

Regards.
0
 
LVL 20

Accepted Solution

by:
Russ Suter earned 334 total points
ID: 40015267
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
 
LVL 12

Author Comment

by:jazzIIIlove
ID: 40015418
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
 
LVL 20

Assisted Solution

by:Russ Suter
Russ Suter earned 334 total points
ID: 40015468
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 12

Author Comment

by:jazzIIIlove
ID: 40016992
Hi Russ_Suter;

Is there a typo in the you js code?
"OK" is surrounded by " whereas Cancel is not.
0
 
LVL 12

Author Comment

by:jazzIIIlove
ID: 40017061
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
 
LVL 28

Assisted Solution

by:Pravin Asar
Pravin Asar earned 166 total points
ID: 40019060
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
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 40019073
You can customize (add appropriate elements) and code with ModalPop div box.
0
 
LVL 12

Author Comment

by:jazzIIIlove
ID: 40021205
Hi;

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

Thanks guys.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now