Solved

equivalent jquery code for modal popup generation

Posted on 2014-04-22
10
556 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Monthly Recap

May was a big month for new releases from Linux Academy! Take a look at what our team built recently in our blog. You can access the newest releases from our blog.

 
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
 
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 29

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 29

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
Suggested Courses

630 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