I understood that opening a modal popup on top of another is not a good practice and a good ux, but my project has the same requirement. I have a modal popup which contains the list of stores with a link to the map and upon clicking on the map link, another modal need to be appear and the previous modal popup with list of stores should still remain open and blurred. Upon closing the second modal, the first should be active again. Below is the page which exactly depicts my requirement, but I am not sure what is the best way to achieve this. Can someone please help ??    Thank you, Prakash.
120998
On the web, is it wise to allow a modal popup (B) to be opened from another modal popup (A)?  If modal popup B were to be closed, the user would again be viewing modal popup A.  I am asking as I can envisage some issues e.g. with dismissing the second popup, if the overlay is clicked do both modals close or just the second one? Would the user think that the first modal has gone or would they know they can return to it by closing the second modal? etc.  Example mockup:   Modal A.  Modal B. Opens when 'button' is clicked in Modal A
32037
I have multiple Safari windows for tab organization. I usually have multiple tabs in each window.  When I click on a link from an app other than Safari, it opens the link in a new tab in Safari, as Safari is my default browser.   The problem is that it often opens in a Safari window that is currently minimized or that I am currently not using. So it doesn't open the link in my main, active, current window (basically the one I have used last). Instead, it chooses its own "default window" to open links in, which may be a window I'm not even using.   However, I would like these links to always open in the window that I used last, and not in a window that I'm not using. Is it possible to make links always open in the last active window you used, or at least set the "default" window which will open new links?  I am currently running macOS Sierra 10.12.1, with the default Safari version that comes with it.
32194
How to add a custom action to the list ribbon?  The custom action should open a sitepage in modal popup.
45495
I opened a Popup from an inline VF page in SFDC and then after some action I was able to close the window but needed a refresh of the Top window from inline frame .  My code is as below for opening a pop up.Note this is inline page   &lt;apex:page standardController="Account" extensions="Accountctrl"&gt;  &lt;apex:form &gt;  &lt;script&gt;    function openwindow(){       window.open("/apex/pagereal", "myWindow", "width=200, height=100");    }  &lt;/script&gt;  &lt;apex:pageBlock &gt;  &lt;apex:pageBlockSection columns="1" id="Test" &gt;     &lt;apex:inputcheckbox value="{!test.istest__c}" label="Same as Above"&gt;     &lt;apex:actionSupport event="onchange" rerender="Test" /&gt; &lt;/apex:inputcheckbox&gt;   &lt;apex:outputPanel rendered="{!NOT(test.istest__c)}"&gt;  &lt;apex:inputField value="{!test.Campaign__c}" /&gt; &lt;apex:inputField value="{!test.cust_vendor__c}" /&gt; &lt;/apex:outputPanel&gt; &lt;apex:commandButton value="Tetete" onclick="openwindow();"/&gt;   &lt;/apex:pageBlockSection&gt;  &lt;/apex:form&gt; &lt;/apex:page&gt;   And my popup page code is as below and I want to redirect top frame from inline page  &lt;apex:page &gt;    &lt;script&gt;    function test(){      alert('hello');      window.opener.top.location.href='https://googleflowauth-dev- ed.my.salesforce.com/001900000096agv';   }     &lt;/script&gt;    &lt;apex:form &gt;     &lt;!-- End Default Content REMOVE THIS --&gt;      &lt;apex:commandButton onclick="test()" value="Test"/&gt;     &lt;/apex:form&gt;   The error is pretty much I know that it is for security browsers dont allow        Unsafe JavaScript attempt to initiate navigation for frame with URL '' from frame with URL ''. The frame attempting navigation is neither same-origin with the target, nor is it the target's parent or opener.   I am happy if i get workaround for same
51969
I'm building a very small app that allows my users to post content to a map.  The home screen of the app contains a map with all of the posts (as seen below).  PROBLEMS  01 - if a user posts a post from the same area, two pins will be on top of each other so you won't be able to access one of them  02 - if a lot of content is posted it will be hard to click on each pin  03 - when you zoom all the way out, there will be too many pins  Can anyone recommend trying anything else please?
27176
For many years I have blocked popup ads with AdBlock Plus.  But it seems more and more these past couple months there is a "new" kind of popup overtaking the web.  They are javascript based "modal" popups which ABP is powerless over.  See attached for an example.  Is there a way to kill these ads without breaking the functionality of anything I need?
914
I want to overlay one image with another using CSS. An example of this is the first image (the background if you like) will be a thumbnail link of a product, with the link opening a lightbox / popup showing a larger version of the image.   On top of this linked image I would like an image of a magnifying glass, to show people that the image can be clicked to enlarge it (apparently this isn't obvious without the magnifying glass).
89017
I have a client who has an Upcoming Events view. However, when there are no upcoming events, he wants to show another view (Past Three Events) which shows the past 3 events. Basically he doesn't like it when the page doesn't show any events so he wants to show something.  I thought of attaching another block of the Past Three Events to the bottom of the main view (Upcoming Events) and then using jQuery to hide it if the main view (Upcoming Events) is populated.  But I was hoping that someone knows a more elegant solution where perhaps either I can conditionally run a view (perhaps using EFQ which I know nothing about) or somehow adjust views to combine 2 queries in one.
72166
I have some HTML and jQuery that slides a div up and down to show or hide` it when a link is clicked:  &lt;ul class="product-info"&gt;   &lt;li&gt;     &lt;a href="#"&gt;YOU CLICK THIS TO SHOW/HIDE&lt;/a&gt;     &lt;div class="toggle"&gt;       &lt;p&gt;CONTENT TO SHOW/HIDE&lt;/p&gt;     &lt;/div&gt;   &lt;/li&gt; &lt;/ul&gt;   $('div.toggle').hide(); $('ul.product-info li a').click(function(event){   $(this).next('div').slideToggle(200); }   My question is: How do I use preventDefault() to stop the link acting as a link and adding "#" to the end of my URL &amp; jumping to the top of the page?  I can't figure out the right syntax, I just keep getting an error saying      preventDefault() is not a function.
81099
I am tryin to create expand and collapse functionality between pageblocks.The scenario is when i click the collapse button in one pageblock ,it should render another pageblock.How this can be achieved ? I tried using java script but the pageblock is not displaying properly. My current code is   &lt;apex:page &gt;   &lt;apex:includeScript value="{!$Resource.jqueryCollapse}"/&gt;   &lt;apex:includeScript value="{!$Resource.jqueryCollapse1}"/&gt;    &lt;apex:includeScript value="{!$Resource.jqueryCollapse2}"/&gt;    &lt;apex:form &gt;    &lt;html&gt;    &lt;head&gt;     &lt;script type="text/javascript"&gt;      $(function(){     $(".header").click(function () {        alert("Loopafe");    $header = $(this);        $content = j$header.next();         $content.slideToggle(100, function () {                 $header.text(function () {                     return $content.is(":visible") ? $(this).attr("src",      "https://c.ap1.visual.force.com/resource/1404298250000/Minus") : $(this).attr("src", "https://c.ap1.visual.force.com/resource/1404298250000/plusimg");     });  });     });  });  &lt;/script&gt;  &lt;style&gt;    .container .content {   display: none;  padding : 5px;  }  &lt;/style&gt; &lt;/head&gt; &lt;apex:pageBlock &gt; &lt;apex:pageBlockSection columns="10" collapsible="True" &gt;            &lt;div class="container"&gt;     &lt;img   src="XXg"class ="   header " /&gt;           &lt;div class="content"&gt;          &lt;apex:pageBlock &gt;            &lt;apex:pageBlockSection columns="5"  &gt;         &lt;apex:outputLabel value="Collapse"  id="theSecond1"/&gt;         &lt;apex:inputText /&gt;         &lt;/apex:pageBlockSection&gt;                     &lt;/apex:pageBlock&gt;    &lt;/div&gt;    &lt;/div&gt;         &lt;apex:outputText value="First" id="theFirst"/&gt;         &lt;apex:InputText /&gt;      &lt;/apex:pageBlockSection&gt;     &lt;/apex:pageBlock&gt; &lt;body&gt;  &lt;/body&gt;  &lt;/html&gt;    &lt;/apex:form&gt;   &lt;/apex:page&gt;
110754
Just wondering whether this is possible? i.e. once a modal is open, close it by clicking anywhere on the grey backdrop?  I've tried invoking my custom close-modal function via: - Adding onclick to the slds-backdrop div - Adding onblur to the slds-modal__container div - Adding onclick to the slds-modal (just wanted to see whether this would work)  None of these seem to work.
22917
I am reviewing some website wireframes from a client and have decided to make the new site responsive. I've had pretty good luck so far with responsive theming and design from a few past projects and they look and act really nice across widths / devices.   However this particular wireframe has quite a few modals and hover windows with lots of information in them.   My questions are:   Will this be like trying to fit a square peg in a round hole?  Do we need to perhaps go the m.domain.com route where we query the device and design two separate websites?  Should I advise the client to do away with so many modals and hover windows if we go the Responsive route?   I know these are subjective questions so not really sure if this is appropriate within this type of forum.
101849
I have a toggle map (like ) with sublayers. I want all the sublayers to be visible when you open the map, but I would like to hide some sublayers when the toggle buttons are clicked. I've tried adding a hide sublayer code into the LayerActions section of my code, but it's not hiding the sublayers (the button does the same function no matter whether the 'layer.getSubLayer(1).hide()' is there or not). This is the code I'm using:  var LayerActions = {  all: function(){   layer.getSubLayer(1).hide();   sublayers[0].setSQL("SELECT * FROM spreadsheet");   return true;  },  2011: function(){   layer.getSubLayer(1).hide();   sublayers[0].setSQL("SELECT * FROM spreadsheet WHERE year IN ('2011') AND year IS NOT NULL");   return true;  },  2012: function(){   layer.getSubLayer(1).hide();   sublayers[0].setSQL("SELECT * FROM spreadsheet WHERE year IN ('2012', '2012/2013') AND year IS NOT NULL");   return true;  } }   $('.button').click(function() {  $('.button').removeClass('selected');  $(this).addClass('selected');  LayerActions[$(this).attr('id')](); });   Could someone point me to where I'm messing up with my code? Or is it not possible to hide a sublayer using the LayerActions?    I'm now loading my layers differently, and this is my new code:   cartodb.createLayer(map, url1)     .addTo(map, 0)     .done(function (layer) {         console.log('added url1 ',url1);         cartodb.createLayer(map, url2)         .addTo(map, 1)         .done(function (layer) {             console.log('added url2 ',url2);         })         .error(function (){             console.log('problem adding 2nd layer');         });     })     .error(function () {         console.log('There is something wrong with requested data!');     });   So if I wanted to hide the first layer that's loaded (url1) and select only certain points from the second layer (url2), how would I code that in my LayerActions section? I've tried the following, but nothing changes when I click the buttons:  var LayerActions = { all: function(){   layer.getLayer(0).hide;   layer[1].setSQL("SELECT * FROM spreadsheet");   return true; }, 2011: function(){   layer.getLayer(0).hide;   layer[1].setSQL("SELECT * FROM spreadsheet WHERE year IN ('2011') AND year IS NOT NULL");   return true; }, ...
34786
What exactly is a modal dialog window and when should you use it? Are there certain cases where you should refrain from using one?
37619
EDIT Dec 4 -  We're doing it live! Please post bugs or concerns as questions tagged [top-bar]  We have rolled out our 95% completed top bar for feedback.  Note:   We are still adding a few final features, so if you have a request for a feature that is not there you might hold off on that for a day or two Yes, the bar is black1. Also give that a day or two to sink in.   I also want to specifically address the meta/main/chat links.  I'm very aware that many of you like having the links at the top of the page and that this new version is different.  The thought process behind moving these links is that the "site switcher" should be an automatic place to go when you are on a site and want to go to another one. If you haven't already developed the muscle memory for these links, getting between them required a bit of a cognitive load: You must first decide that you want to switch sites and then you have to decide which area to go to to switch.  Also, we find that less familiar users aren't entirely clear what a standalone link that says "main" or "meta" actually does... Not to mention that it hurts my UX sensibilities that we are dynamically changing links in an element that should be fixed.  It is true that we have added a click in the process, but we have also removed a lot of clicks for other common actions that are much more frequent than switching between main and meta.  All I ask is that you give it a few days and see if the new "switch sites at the top left" paradigm grows on you.  What do you think?  1.  points out that technically it's not quite black.
59753
I will often click on a button expecting it to be clicked but instead all that happens is the application it is in becomes active, and I have to click again to actually click the button.  It would be nice if this second click wasn't needed, which leads me to my question:     How can I make it so that when I move the mouse cursor over an inactive window, it becomes active?
43242
My objective is to control the width of the modal provided by lighting:overlayLibrary component. I am trying to do it by overriding the css applied to the slds-modal__container. I was hopeful this would be as easy as adding the override to the style page of the component that contains the modal and applying it at modal creation using the cssClass class param.  I have tried a few variations based on the following with no luck  the component  &lt;component&gt;   &lt;lightning:overlayLibrary aura:id="theModal" /&gt;   &lt;!-- a button to open the modal --&gt; &lt;/component&gt;   the controller  ({   openModal:function(component){         var modalBody;         $A.createComponent("c:pseudoContent", {},                            function(content, status) {                                if (status === "SUCCESS") {                                    modalBody = content;                                    component.find('theModal').showCustomModal({                                        header: "Application Confirmation",                                        body: modalBody,                                         showCloseButton: true,                                        cssClass: "mymodal",                                        closeCallback: function() {                                            alert('You closed the alert!');                                        }                                    })                                 }                             });   }   })  and the sytle  .THIS .mymodal div.slds-modal__container{   width:90%;   max:width:90% }   This produces a page containing   &lt;div class="panel slds-modal mymodal slds-fade-in-open" aria-labelledby="title_2454:0" tabindex="-1" role="dialog" aria-modal="true" data-aura-rendered-by="2477:0" style="opacity: 1;"&gt;   &lt;div class="modal-container slds-modal__container" data-aura-rendered-by="2478:0"&gt;     ...   &lt;/div &lt;/div&gt;   but when I inspect the page the styles in the mymodal class are not being applied to the element, I guess it is a scope issue??   Is there a way to get control of the width of the modal?  Your help is appreciated!