Modal mask appears over modal element - javascript

I have a modal pop up that needs to be fired from an article in a module, I need to have this format. The modal pop up is behind the modal backdrop and positions in relation to the module.
I get that its taking the parent relative position of the article in the module but I need to stop it without breaking the page layout.
In other words I need this page: http://my-healthy-living.co.uk/weight-management/herbalife-core-nutrition-formula-1-meal-replacement-shakes
To behave like the pop ups in this page :http://my-healthy-living.co.uk/weight-management/herbalife-protein-shake-solutions
With it in front of the backdrop and central to the screen. Please help!

Ignore please, was trying to post comment on my phone but added as an answer!!! Can't find delete on the darn app....
He means the actual code for the modal and any relevant JavaScript and PHP.

Related

Web Design - Modal CSS Change to Display Block on Site Exit

I am trying to implement an easy way of displaying a small modal window when the user exits my Website, containing a quick and easy single question dialog, with a multiple-choice answer, and a submit button..
I'm having trouble finding a simple, straight-forward answer everywhere I've looked. Yes, I searched.
NOTE: I already have my Modal Window created, with the Form on it, and everything ready! (currently the Modal Window is set to Display None, until I figure out the following question)..
What I need to know exactly is this: What is the easiest way to simply detect when the user is leaving my website, and set the Property of the Modal Window ID to Display:Block for example, which would change it from Display:None and make it show?
I would prefer a simple script being able to detect any of the following behavior as they are trying to exit the website either by (A) clicking X on the tab, (B) clicking X on the window, or (C) hitting the back button enough times to leave my Site - at which time, the script would change my Modal's ID property from display none, to display block.. Thats it.
Thanks in advance!
JavaScript has a special event for this onbeforeunload
<script>
window.onbeforeunload = exitFunc;
function exitFunc() {
modal logic here
}
</script>

Adding DIV's inside modal dialog HTML5

I tried to google but didnt find exactly I am looking for.
I need a sample example code or a resource link to create a modal dialog box and I want to have two boxes(div's) inside the dialog box.
I have to insert different content inside both the boxes(inside the dialog box) when the user clicks.
I know how to create a dialog box but, I would like to particularly know how to insert divs inside it.
I hope my question is clear. Please help.
If you just want to look at the code have a look at the work section of http://www.pixelvalet.com (ok! its my website but then it would help you right?).
The way i approached the issue is:
first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself
next i gave it a hidden css style to the parent which contained all the divs.
then i added a logic which would tell the browser the which link was clicked and then it would populate the divs in the template appropriately using ajax
it would then slowly fade in using jQuery
but then this isnt the only way you might do this. There are tons of plugins out there which help you create a modal box. but i opted for this route because i wanted it completely customised.
hope it helps.
I have used bootstrap modal for dialog box it works great you check it here:
http://getbootstrap.com/javascript/#modals
The basic idea is just put your dialog box code at bottom of you page,
<div id="my_dialog">
content
</div>
And you detach it in your jquery or other framework you are using or just pure js.
In jquery you can do this:
var my_dialog = $( "#my_dialog" ).detach();
now when ever you need to show it you just attach it to where you want to show it.
and before you attach it you can insert any content you want.
But I would suggest you to use bootstrap's modal much easier.

Clicking on Twitter Bootsrap 3 Modal Background

I am using bootstrap 3 to show a modal on top of a map with spots. I'd like users to be able to click on the spots on the map without the modal exiting.
I already have set the modal background to static so it doesn't quit when you click outside the modal but reducing it's z-index still doesn't allow the spots to be clicked on.
Anyone know how to do it, tried googling but seems like i'm the only one with this weird need
I am not sure if I understood correctly, but do you just want to keep the modal open, even if a user clicks outside of the actual dialogue? If yes, this answer might help you. It says to change data-backdrop to static :
<a data-controls-modal="your_div_id" data-backdrop="static" href="#">
Quick and dirty solution is to reduce the length of backdrop element which works for me because modal is not the left and map is on the right with both sharing equal status in terms of interest

Livecycle remove first page

I have a LiveCycle form in Designer that has a flowable menu page with checkboxes. When a checkbox is checked, certain pages are 'shown' in the document. The pages are subforms containing an image.
This functionality works fine. What I want to do is add a button to the front page that will remove the front page, open a 'saveas' window and then close. I can get the saveas and the close function to work but the front page gets cleared and is left blank in the document. If there is nothing on the page then surely it should realise it is not required as per the workflow?
Any workarounds would be greatly appreciated, this has been doing my head in for weeks! I know I can't delete the page using the acrobat model as there aren't the correct permissions. I'm hoping a bit of javascript on the button will do the trick.
At the moment I have:
this.resolveNode ("indexSub").presence = "hidden"; //indexSub is the subform
app.execMenuItem("SaveAs");
app.execMenuItem("Close");
I will look at forcing a filename at save another time!
Thanks
It is quite strange behaviour. I've checked that you can set presence either to invisible or inactive and it works fine then.
this.resolveNode ("indexSub").presence = "invisible"; // or "inactive"
Differences between invisible and inactive you can fnd here: http://blogs.adobe.com/formfeed/2009/03/xfa_30_presenceinactive.html
Actually "inactive" did play a part in the solution, not entirely sure if it was intentional!
The main change was to alter the first page from flowable to positioned. When the button was pressed, the page cleared, the SaveAs dialogue opened and then the document closed. When the saved document was reopened the menu page had disappeared as required. I'll add a comment to this if anything changes. Thanks all.

Is there a way to have multiple dialog boxes with Twitter-Bootstrap?

I am using Twitter Bootstrap for everything and it's great but am at the point where I need multiple dialog boxes on the screen. I have not been able to find in the documentation how to do this so I'm assuming it is not something that is included.
I'm looking for something similar to jQuery-UI dialog boxes (NOT modals)
Is there a way to achieve this with Twitter Bootstrap without writing a new piece of code?
There is not problem in doing so. I've a project where it is working fine. There is one 'glitch' the backdrop is stacked so the backdrop (if you use it) of the first dialog is leading and for every dialog one gets stacked on top of it. The dialog you opened first is not greyed out. So probable you want to load you dialog with .modal("show", {backdrop: false}) after the first one and if possible you want your dialogs to be of the same size or bigger then the previously opened dialogs to circumvent the problem.
In our case it's an internal application, so this is not a big issue. But for a public website I could imagine this is a showstopper.

Categories

Resources