Develop Reference

How to automatically open a popup-box modal only from an external URL

I would like to have a button when clicked opens up a modal form hosted on another server.
Say the button is on www.web.com/review
Then when you click a button, it opens the modal box on another server and domain www.example.com/modal.
I would like to have a button as below on server A on URL www.web.com/review;
<button type="button" class="btn btn-primary btn-lg btn-flat" data-toggle="modal" data-target="#review-box"> Write a review</button>
When clicked opens up the modal on another server B on URL www.example.com/modal.
<!-- Modal -->
<div class="modal fade" id="review-box" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Can this be done or is it far fetched?

From internal server you need to put script frm the button that point to the external link, if you want to hide the external address you can use iframe or point to the modal directly.
function ExternalLink() {
let url = 'https://www.externallink.com/;
window.open(url,"theFrame");
}
html
<container>
<button onClick=ExternalLink()></button>
<iframe class="embed-responsive-item" name="theFrame" src="#">
<div class="modal fade" id="myModal" role="dialog">
</iframe>
</container>

How to close modal popup only when pressing the cancel button?

I have a simple modal and I was wondering how can I only allow the modal to be closed when clicking the "X" button or the cancel button. Now when the user clicks outside the modal area.
Here's my code:
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

use this..
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
or directly put it in your div
<div id="myModal" class="modal hide" data-backdrop="static" data-keyboard="false">

Using Bootstrap 3, is there a way to reuse the same HTML for different media queries to practice DRY?

I've been reading Bootstrap 3's documents about modals, and it makes sense to use this HTML for the modal content. I'd be creating this modal on mobile:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
My question is, I'd want to reuse the HTML inside the body of the modal for a sidebar on the desktop media query. How would I do so without repeating the HTML for a second time as a completely different div that simply contains the exact same content?

make modal popup while clicking on menu

I have a simple html design with an animated menu. I am trying to implement bootstrap on it and make modal window. But when someone clicks at contact, my animated menu stops working. Here you can check the problem.
My modal code here. I'm using #mymodal on menu link.
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

You can do this using Jquery
$(document).on("click",".menu",function(){
$("#myModal").modal("show")
})

display a Modal or a dialog when a button is clicked in infowindow in javascript?

I have to display a new modal when a button is clicked in the infowindow. When I click MORE button in info window a modal should appear with more information regarding the marker while disabling the background.
I have tried in the following way but it is not working:
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have added a button in info window to display the modal:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
But the above code is not working.