Dim background screen when modal popup opens - javascript

I have a modal popup that opens on a button click. I am trying to dim the background when the popup open but I can't get it to work.
This is what I have:
JavaScript:
function popup(centername, centertype, area, address, province, itprovider, software, addon,
principalname, principleemmail, itname, itemail, itno, academicname, academicno, academicemail,
invigilatorname, invigilatorno, invigilatoremail, centeridep, provinceidep, centernameep, centertypeidep, id) {
var $dropdown = $("#ddlCenterType");
$("#txtCenterName").val(centername);
$("#txtArea").val(area);
$("#txtAddress").val(address);
$("#ddlProvince").val(province);
$("#ddlProvider").val(itprovider);
$("#ddlSoftware").val(software);
$("#ddlAddOn").val(addon);
$("#txtPrincipalName").val(principalname);
$("#txtPrincipalEmail").val(principleemmail);
$("#txtITName").val(itname);
$("#txtITemail").val(itemail);
$("#txtITNumber").val(itno);
$("#txtAcadName").val(academicname);
$("#txtAcadNumber").val(academicno);
$("#txtAcadEmail").val(academicemail);
$("#txtInvName").val(invigilatorname);
$("#txtInvNumber").val(invigilatorno);
$("#txtInvEmail").val(invigilatoremail);
$("#txtCenterId").val(centeridep);
$("#txtProvinceID").val(provinceidep);
$("#txtCtrName").val(centernameep);
$("#txtTypeID").val(centertypeidep);
$("#txtID").val(id);
$dropdown.val(centertype);
$("#popupdiv").dialog({
width: 1250,
height: 1290,
autoOpen: true,
modal: true,
open: function (event, ui) {
$(".ui-widget-overlay").css({
background: "rgb(0, 0, 0)",
opacity: ".50 !important",
filter: "Alpha(Opacity=50)",
});
},
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
}
I also added this in the CSS but still doesn't work:
.ui-widget-overlay {
opacity: .50 !important;
filter: Alpha(Opacity=50) !important;
background-color: rgb(50, 50, 50) !important;
}
I know this question has been asked a couple of times but I still can't get it to work. Please assist. Thanks!

Just remove the important from opacity and it will work. Though I would recommend to use CSS for this. You can add and remove a class when modal opened and closed, and use it in combination with ui-widget-overlay to override background and opacity.
Here is a working example of how would that work
$( function() {
$("#dialog").dialog({
width: 360,
height: 290,
autoOpen: true,
modal: true,
open: function (event, ui) {
$(".ui-widget-overlay").addClass('modal-opened');
},
close: function(event, ui){
$(".ui-widget-overlay").removeClass('modal-opened');
}
});
} );
.ui-widget-overlay.modal-opened{
background: rgb(0, 0, 0);
opacity: 0.5;
filter: Alpha(Opacity=50);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is a plnkr of the above example https://plnkr.co/edit/GUW4NFEO9omn898n8aGm?p=preview

Related

jquery dialog not load iframe

I have this code:
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
<style>
#myIframe{
width: 100%;
height: 100%;
}
</style>
function showModalSettings(id){
alert(id);
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
$('#myIframe').src = 'https://www.onet.pl';
},
height: '600',
width: '800',
resizable: true,
title: 'Settings'
});
$('#dialog').dialog('open');
}
showModalSettings(12);
I need to open in the jquery dialogbox https://www.onet.pl (in iframe).
The current code shows me the dialogbox correctly - but without the onet.pl website. Iframe is empty
how to fix it?
With jQuery we use the attr() method to modify the attributes of an HTML element.
Your code after the fix will looks like this:
function showModalSettings(id){
alert(id);
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
//$("#myIframe").src = "https://www.onet.pl";
$("#myIframe").attr("src", "https://www.onet.pl");
},
height: '600',
width: '800',
resizable: true,
title: 'Settings'
});
$('#dialog').dialog('open');
}
showModalSettings(12);
#myIframe{
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello, world!</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="dialog">
<iframe id="myIframe"></iframe>
</div>
</body>
</html>
Read more about the attr() from the following link: https://api.jquery.com/attr/
Side Note: next time please reveal the libraries or frameworks you're using (e.g. jQuery UI in this question) , this help whoever want to answer your question.

how to generate media queries with JQUERY

I am trying to display a dialog box when users access a page with a device smaller than a desktop. I am not an expert in jQuery. I tried the following below but was not successful.
$(document).ready(function () {
if (window.matchMedia('(max-width: 767px)').matches) {
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true,
}).show();
} else {
$("ScreenSize").dialog().hide();
}
});
<div id="ScreenSize" style="display:none">
<p>Go to Text Box</p>
</div>
This code is executed on Dom ready. Considering that you open that dialog only in the if branch, actually the else branch is useless because when you reload the page, it doesn't get opened at all. Or maybe there is some other logic that you are not providing.
Then .dialog() is a method of the jQuery UI library. You should add also that library in order to get the dialog working. If you open your console you see that the method dialog() is undefined.
Your javascript code is OK. On the html part, jQuery and jQuery UI (for the dialog widget) scripts must be loaded in the correct order: jQuery first, UI after. Try the following code snippet, it works as you wanted.
$(document).ready(function () {
if (window.matchMedia('(max-width: 767px)').matches) {
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true
}).show();
} else {
// this part is useless...
$("ScreenSize").dialog().hide();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="ScreenSize" style="display:none">
<p>Go to Text Box</p>
</div>
</body>
</html>
Why is jQuery needed? Why not just use css media query to display and hide your dialog box.
CSS:
#ScreenSize {
display: none;
}
#media only screen and (max-width: 767px) {
#ScreenSize {
display: block;
}
}
i have used these following below in order to find a solution to my problem
$(function () {
if (screen.width < 1023) {
$("#ScreenSize").show();
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true,
resizable: false, draggable: false,
})
}
else {
$("#ScreenSize").hide();
}
});
<span class="ui-state-default ui-corner-all" style="float: left; margin: 0 7px 0 0;"><span class="ui-icon ui-icon-info" style="float: left;"></span></span>
<div style="margin-left: 23px;">
<p>go to Text Box</p>
</div>
<//div>

Animating the logo automatically with a pop-up info on being clicked

> <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">
Inline popup
</div>
<style>
#open-popup {padding:20px}
.white-popup {
position: relative;
background: #FFF;
padding: 40px;
width: auto;
max-width: 200px;
margin: 20px auto;
text-align: center;
}
</style>
<script type="text/javascript">
$('#open-popup').magnificPopup({
items: [
{
src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg',
title: 'Peter & Paul fortress in SPB'
},
{
src: 'http://vimeo.com/123123',
type: 'iframe'
},
{
src: $('<div class="white-popup">Dynamically created element</div>'), // Dynamically created element
type: 'inline'
},
{
src: '<div class="white-popup">Popup from HTML string</div>',
type: 'inline'
},
{
src: '#my-popup',
type: 'inline'
}
],
gallery: {
enabled: true
},
type: 'image'
});
<script>
</body>
</html>
How can I make a logo float to the right automatically when clicked and make a pop out appear with some info.
Right now I used a button but I want to use a logo..so how can I put in the image instead of the button and also the pop up to appear when clicked on that logo image.
To use an image as the trigger for the pop-up window, it looks like you're using the id "open-popup." You can remove the button and add an image or put an image in the button (I like buttons, but you have to take measure to unstyle it) - so a <a> tag - or whatever you like + add the id of "open-popup."
..button id="open-popup">...
...$('#open-popup').magnificPopup({...
As far as moving the logo on click... you can add a class with jQuery/JavaScript and that class can do the animation.
jQuery
$('.element').on('click', function() {
$(this).addClass('active'); // $(this) refers to the element clicked in this case
});
styles
.element {
transition: .5s; // set speed (look up other options)
}
.element.active {
transform: translate(50%, 0); // random movement example
}
There are many different pop-up / light-boxes. If magnificPopup isn't enjoyable, try another.

Open tinymce editor upon clicking icon

Upon loading the page, I wish the tinyMCE editor to be closed. Upon clicking an element (and not the text, thus I don't think I should use inline mode), I wish to open it. I've found a couple ways of doing so. Is there a "right" way, and if so, what is it?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js" type="text/javascript"></script>
<style type="text/css">
#content {height:200px;width:400px;border: 1px solid;}
</style>
<script type="text/javascript">
$(function(){
// Don't want this as I want to edit upon clicking "edit" and not inline
tinymce.init({
selector: '#content',
width : 400,
height: 200,
inline: true,
});
// Don't like this as I think it is ineffient, and the screen flickers
$('#edit').click(function(){
tinymce.init({
selector: '#content',
width : 400,
height: 200
});
});
// Is this how I should do it?
tinymce.init({
selector: '#content',
width : 400,
height: 200,
setup : function(ed) {
ed.on('init', function(e) {
e.target.hide();
});
}
});
$('#edit').click(function(){
//BOth seem to work. What is the right way?
//tinymce.editors['content'].show();
tinymce.get('content').show();
});
});
</script>
</head>
<body>
<div id="content">Initial content goes here</div>
<button id="edit">Edit</button>
</body>
</html>

display: inline; doesn't work with copy link

Can you explain me why only the third "copy link" works only if all panels are closed ?
I want my copy link works when it's in a panel and when a panel is open too.
HERE IS MY PAGE:
http://500milligrammes.com/facticemagazine/final/0/
JSFIDDLE
HERE IS MY CODE:
<!DOCTYPE HTML>
<!--[if IE 8]><html lang="en" class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<style>
.panel1,
.panel2 {
display: none;
border: 1px solid #ccc;
background-color: #eee
}
.flip1,
.flip2 {
border: 1px solid #ccc;
background-color: #eee
}
#check,
#check2 {
visibility: hidden;
width: 12px;
height: 12px;
}
span#copy-callbacks,
span#copy-callbacks2 {
float: none;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("span#copy-callbacks").zclip({
path: "ZeroClipboard.swf",
copy: $('#callback-paragraph').text(),
beforeCopy: function() {
$('#copy-callbacks').css('background', 'none');
},
afterCopy: function() {
$('#copy-callbacks').css('background', 'none');
}
});
document.getElementById("copy-callbacks").onclick = function() {
document.getElementById("check").style.visibility = "visible";
}
});
$(document).ready(function() {
$('span#copy-callbacks').hover(
function() {
$(this).css({
"color": "#e0ccb4"
});
},
function() {
$(this).css({
"color": "#000"
});
}
);
$("span#copy-callbacks2").zclip({
path: "ZeroClipboard.swf",
copy: $('#callback-paragraph2').text(),
beforeCopy: function() {
$('#copy-callbacks2').css('background', 'none');
},
afterCopy: function() {
$('#copy-callbacks2').css('background', 'none');
}
});
document.getElementById("copy-callbacks2").onclick = function() {
document.getElementById("check2").style.visibility = "visible";
}
});
$(document).ready(function() {
$('span#copy-callbacks2').hover(
function() {
$(this).css({
"color": "#e0ccb4"
});
},
function() {
$(this).css({
"color": "#000"
});
}
);
$(".flip1").click(function() {
$(".panel1").slideToggle("fast");
});
$(".flip2").click(function() {
$(".panel2").slideToggle("fast");
});
});
</script>
</head>
<body>
<div class="flip1">Click to slide the first panel down or up</div>
<div class="panel1">
when this panel is open, any copy link works !!!
</div>
<div style="margin-top:150px;" class="flip2">Click to slide the second panel down or up</div>
<div class="panel2">
when a copy link is inside a panel, it doesn't work !!!
<br/>
<br/>
<span id="copy-callbacks">Copy link <img src="check.png" id="check" style="display: inline;"></span>
<span style="font-size:0px;" id="callback-paragraph">essaie sans alert</span>
</div>
<div style="margin-top:150px; ">
This one works perfectly when all panels are closed !!
<br/>
<span id="copy-callbacks2">Copy link <img src="check.png" id="check2" style="display: inline;"></span>
<span style="font-size:0px;" id="callback-paragraph2">essaie sans alert</span>
</div>
<script type="text/javascript" src="jquery.zclip.js"></script>
<script type="text/javascript" src="jquery.cbpFWSlider.min.js"></script>
</body>
</html>
ZClip adds an absolutely positioned flash (swf) object which clings to the bottom and when your panels are closed the zclip object container covers the third link and you can't click on it.
See your updated fiddle, I put a border around zclip and you can see that it's right over the link: http://jsfiddle.net/4x3qctno/2/
When you open panels it pushes third link down, but the zclip container stays in the same place and so your link works then.
To fix this, change z-index of zclip object container in CSS like so:
.zclip{
z-index:-1000!important;
}

Categories

Resources