Steps to generate a unique URL for launching a Bootstrap Modal directly

I've encountered a problem where I'm trying to trigger a Modal in window B using a URL when clicking on an image link in window A. The image is nested inside an anchor tag like this: 

<a href="myserver.mydestinationB.com#myModal><img src='myImage'></a>
within window A.

Is there a way to navigate to window B and activate the modal purely through the URL?

Here is the code:

Page A

<a href="http://www.x.com/#DesiredModalID">
<img typeof="foaf:Image" src="http://google.com/image.png" width="1920" height="1080" alt="">
</a>

Page B

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog"><!-- Modal content-->
<div class="modal-content">
<div class="modal-header"><button id="modalclose" class="close" data-    dismiss="modal" type="button">×</button>

<h4 class="modal-title" id="header-data">Modal Header</h4>
</div>

<div class="modal-body">
<p id="modal-text">Some text in the modal.</p>

<div id="modal-body" style="text-align: center;">&nbsp;</div>
</div>

<div class="modal-footer">
<h5 id="footer-data" style="font-weight:bold;font-style:italic;float:left;">Test Data</h5>
<button class="btn btn-default" data-dismiss="modal" id="closetwo" type="button">Close</button></div>
</div>
</div>

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

<img id="profileImg" src='profileImage'>


<script>
$(document).ready(function(){

    $("#profileImg").click(function() {
        $("#userModal").modal();
    })

})

</script>

Answer №2

<a href="myserver.mydestinationB.com?mymodal=open>


--- Now, in Page B you include the following JavaScript code ---

<script>

$(document).ready(function(){

var myModalStatus = $_GET('mymodal');

if(myModalStatus != null){
        $("#myModal").modal();
}

})

function $_GET(param) {
    var parameters = {};
    window.location.href.replace( location.hash, '' ).replace( 
        /[?&]+([^=&]+)=?([^&]*)?/gi, // regular expression
        function( match, key, value ) { // callback function
            parameters[key] = value !== undefined ? value : '';
        }
    );

    if ( param ) {
        return parameters[param] ? parameters[param] : null;    
    }
    return parameters;
}

</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing the visual appeal of a JSON object with texture using Three.js

Struggling to apply texture to my 3D Dog JSON model exported from clara.io. Tried using Objectloader and Textureloader, but the texture won't load onto the model. The code might be incorrect or in the wrong place. Looked at other examples but no luck ...

javascriptjsonthree.js

Switching an application from Angular 5 to Angular 8 can lead to unexpected styling problems

My current project is based on Angular version 5.2, but we recently decided to upgrade it to Angular 8 along with updating the Angular CLI. After completing the necessary code refactoring for Angular 8, the application builds successfully without any error ...

javascriptangulartypescriptsingle-page-applicationangular8

Incorporate an HTML hyperlink into a table created with Google Charts

I'm having trouble getting an HTML link to display correctly in a Google Chart Table column. I have set the option for HTML to be true for both the column and the table, but it's only showing the HTML code instead of rendering the link. Can anyon ...

javascript

Add a partially see-through overlay to the background image

I'm designing a webpage that requires a background image with a semi-transparent black overlay on top (rgba 0 0 0 0.5). Originally, I tried this approach: <body id="body-pd" style="background: url('./img/Home e Roleta.png' ...

htmlcssbootstrap-5

What is the process of converting the timing from my stopwatch to a standard time format?

I am currently working on a stopwatch project where I log the time into an array. However, when I try to use Math.min(array) or Math.max(array), it returns NaN (not a number). The time format for the stopwatch is like 00:00:15.91 which is not recognized as ...

javascript

Are there more effective methods for determining the precise CSS values needed for a 3D transformation, rather than relying solely on trial and error?

Having a 3D iPhone vector, I am looking to create a sprite animation of screens on top of it. To achieve this, I am using a div as a mask over the iPhone, with the sprite background animating through transition and background-position. The iPhone is alrea ...

css3dtransform

Adjust the dimensions of the dropdown menu

Objective: How can I adjust the width of a select dropdownlist that is utilizing bootstrap v2? Challenge: I am uncertain about how to modify the width in the context of bootstrap. Additional Information: Keep in mind that there are three dropdownli ...

javascriptjqueryhtmlcsstwitter-bootstrap

Bootstrap 4 and Angular 7 application experiencing issues with toggle button functionality in the navigation bar

I am currently working with Angular7 and Bootstrap4. I am attempting to integrate a navbar into my application, but I am facing an issue where the toggle button does not work when the navbar is collapsed. It is important for me to mention that I do not wa ...

htmlcssbootstrap-4angular7

Using jQuery to add the input from a dynamically loaded Ajax select list to a different form prior to submission

Let's simplify the code for this question: I have two HTML forms with IDs of 'header' and 'existing' In the 'existing' form, there is a select element where the options list is loaded dynamically using Ajax based on sea ...

jqueryhtmlajaxformsselect

Utilizing Ajax, JavaScript, and Webmatrix to dynamically refresh a select box

I'm a beginner when it comes to working with Ajax. The goal I am aiming for seems like a common one. I have two dropdown boxes, "area" and "resort", that are connected to my database. The concept is simple: when a user selects an area from the first ...

sqlajaxjqueryrazorwebmatrix

What is the best way to add uppercase letters exclusively?

Is there a way to dynamically style uppercase text within an <h2> tag that is generated based on an image's alt text? I'm thinking of using javascript / jquery to identify the uppercase text and encase it in a <strong> tag, then appl ...

javascriptjquery

When using jQuery with a large selectbox, you may encounter the error message: "Uncaught RangeError: Maximum

My select box works fine in IE and Mozilla, but throws an uncaught rangeError in Chrome when choosing the "Others" option to display a second select box with over 10k options. How can I diagnose and resolve this issue? <!DOCTYPE html> ...

javascriptjqueryhtmlgoogle-chromedrop-down-menu

Error: React Js Module Not Found

Encountered a Compilation Failure. The module was not found: Error: An attempt to import ../components/App which exists outside the src/ directory of the project has been made. Relative imports from outside src/ are not permitted. To resolve this issue, c ...

javascriptreactjsnpmmappingjsx

Create a v-on:click command within a v-for loop

I have a list of images displayed with some information. I am trying to make these images clickable so that when clicked, a div will show up saying "HI!!". I attempted to set a variable as show:true in Vue data and create logic to change it to false upon c ...

javascriptvue.jsvue-directives

What is the best way to adjust the size of a 3D Cube in WebGL GLSL without affecting its center point?

I have a scaling attribute that I am applying to various instances of an instanced buffered geometry in Three.js. The shader code appears as follows: attribute float scale; uniform vec3 uMeshPosition; void main() { vec3 pos = position; pos.x *= (uMe ...

javascriptthree.jsglslcoordinate-transformation

"What is the best way to retrieve the name of the object passed in a function in

After searching high and low, I still can't seem to find the answer to my simple question. Maybe it doesn't exist, but I won't give up just yet. So here's the scenario: I created a global prototype in Vue, essentially a global class, ...

javascriptvue.jsvuejs2

Sending an array from a URL to JavaScript

Is it possible to dynamically pass an array from a GET request in the format below: [x, y], [x, y]... Into the second part of this Google Visualization API call? var data = google.visualization.arrayToDataTable([ ['Initial', 'Second' ...

javascriptphparrays

Is there a way to position two bootstrap col divs in alignment with a third col div situated to the left?

I'm attempting to achieve the desired layout shown in this result: https://i.sstatic.net/B3EDr.png Here is the code I have been working with: <div class="container"> <h1>Welcome Dennis,</h1> <div class="col-12 card card- ...

htmlcssbootstrap-4

Is it possible to invoke a Java Script function from a GridView using `<% Eval("") %>` as a parameter for the function?

Is there a way to call a javascript function with a single parameter from a link click within the GridView Control? I need to pass the value of the parameter using <%Eval("myfield")%>. How can this be accomplished? <ItemTemplate> ...

c#javascriptasp.netgridview

Troubleshooting Problems with CSS and JavaScript in Google Chrome

I've been developing a photo gallery with 44 images in total, each sized at 300kb. The images are hidden using CSS as shown below: .koImg1 { display:none; } .koImg2 { display:none; } .koImg3 { display:none; } These examples illustrate how I&apo ...

javascriptjqueryasp.netcssgoogle-chrome