I am facing some issue on how to allow multiple modal dialog to run on a web.
When i include 2 modal dialog in my HTML code, the web page was unable to load.
Basically this is my HTML code
<div class="form-group">
<label>New User?
<a id="btn_signup_now" runat="server" data-toggle="modal" href="#mySignUp" data-backdrop="true">
Sign Up For Free Now
</a>
</label>
</div>
<div id="mySignUp" class="modal hide fade" role="dialog" tabindex="-1">
<div class="modal-header">
<asp:Button runat="server" class="close" data-dismiss="modal" aria-hidden="true" Text="*"/>
<h4 class="modal-title" id="myModalSignUp">Candidate Sign Up</h4>
</div>
Your code should be closer to this:
You are missing many elements that are necessary for a modal to work and have elements that may also be breaking it. You need this target="#mySignUp" to call the modal and you're also missing the <div class="modal-content"> and <div class="modal-header"> (and footer <div class="modal-footer"> if you feel it's needed. When I tested it your hide class broke it but that may be specific to what you are doing.
<div class="form-group">
<label>New User? <a id="btn_signup_now" runat="server" data-toggle="modal" target="#mySignUp" href="#mySignUp" data-backdrop="true"> Sign Up For Free Now</a></label>
</div>
<div id="mySignUp" class="modal fade" role="dialog" tabindex="-1">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<h4 class="modal-title" id="myModalSignUp">Candidate Sign Up</h4>
</div>
<div class="modal-footer">
<asp:Button runat="server" class="close" data-dismiss="modal" aria-hidden="true" Text="*" />
</div>
</div>
</div>
</div>
Related
I have a site view modal and it pops up maybe once every ten times after a refresh. Why does it do this? Could it be interference of different JS on my page? I have checked other posts about this issue and none of their solutions have worked for me.
<a data-toggle="modal" href="#myModal" class="btn btn-default">Launch
modal</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Write Your Review</h4>
</div>
<div class="modal-body">
[site_reviews_form assign_to="post_id"]
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
I want to load one page inside another(I'm working with laravel ). I have a link on the page, when user clicks on a button, a bootstrap popup modal will be shown. So I need to load the whole page (including scripts and styles) in this bootstrap popup modal. The problem is my loaded page in popup, doesn't work correctly.. and I don't know how to load my scripts into my modal.. I have tried with iframes but it doesn't work either with the error 'X-Frame-Options' with 'deny' value..
Can anyone help me to resolve it?
thanks with regards
its a sample of my code:
<a class="btn"
title="View"
data-toggle="modal"
data-target="#cv_view">
<span class="glyphicon glyphicon-eye-open"></span>
</a>
{{-- modal--}}
<div class="modal fade"
id="cv_view"
tabindex="-1"
role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<iframe
:src="cv.viewRoute"
style="zoom:3"
width="100%"
height="250"
frameborder="0">
</iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
I want this popup form still show when I click asp.net button ID btnFindSales
Currently, It close when I click this button.
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">List of Sales Employee</h3>
</div>
<div class="row criteria-box">
<div class="col-md-6 criteria-item">
<asp:DropDownList CssClass="form-control" style="max-width:280px;" ID="ddlFindOption" runat="server">
<asp:ListItem>Slp Code</asp:ListItem>
<asp:ListItem>Sales Name</asp:ListItem>
<asp:ListItem>Position</asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-md-6 criteria-item">
<div class="input-group">
<asp:TextBox CssClass="form-control" ID="txtFindSales" runat="server"></asp:TextBox>
<div class="input-group-btn">
<asp:Button ID="btnFindSales" runat="server" Text="🔎" OnClick="btnFindSales_Click" CssClass="btn btn-primary" UseSubmitBehavior="false" data-dismiss="modal"/>
</div>
</div>
</div>
</div>
<div class="modal-body" style="padding-bottom:0;">
<!-- content goes here -->
</div>
</div>
</div>
</div>
the problem with asp button id btnFindSales.
Please give me some advice.
Thank for comments above and I found code to fix it.
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "squarespaceModal", "$('#squarespaceModal').modal();", true);
code above is use for open popup.
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "squarespaceModal", "$('#squarespaceModal').modal('hide');", true);
and this one for close/hide popup.
I have the following Modal:
<a href="somepage.htm" data-toggle="modal" data-target="#extLinkModal">
<div class="modal fade" id="extLinkModal" tabindex="-1" role="dialog" aria-labelledby="extlinkModalLabel" aria-hidden="true" data-backdrop="static">
<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="extLinkModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When I click the link to launch modal, the content of somepage.htm overflows out of the modal and there are no scroll bars on the modal?
How come this is happening?
Let's say you have 2 pages, index.htm and somepage.htm
you have modal in page index.htm and you want to show somepage.htm inside modal. Then
index.htm page code will be
<a href="somepage.htm" data-toggle="modal" data-target="#extLinkModal">
<div class="modal fade" id="extLinkModal" tabindex="-1" role="dialog" aria-labelledby="extlinkModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog " role="document">
<div class="modal-content">
//Here you can show the content from `somepage.htm`
</div>
</div>
</div>
and somepage.htm page content will be
<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="extLinkModalLabel"></h4>
</div>
<div class="modal-body">
//Put the page content here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
This will resolve the issue somepage.htm overflows out of the modal and there are no scroll bars on the modal
Alternate Solution
OP asked in comments to load the remote page content into modal-body and above code example is default behavior of bootstrap v3+ where modal ignores the modal-body and always load the remote content into <div class="modal-content"> doesn't matter even if <div class="modal-body"> exist inside the <div class="modal-content">.
To get around this and make sure that the remote content load inside <div class="modal-body">
Use bootstrap modal events
Do not use href or remote in modal call button or link
So the modal call button or link will be
<a datalink="somepage.htm" data-toggle="modal" data-target="#extLinkModal" class="btn btn-primary">
where href changed to datalink or any word can be used but not href or remote otherwise modal will detect it as remote content and ignores the <div class="modal-body"> and load the content into <div class="modal-content">
Modal HTML
<div class="modal fade" id="extLinkModal" tabindex="-1" role="dialog" aria-labelledby="extlinkModalLabel" aria-hidden="true" data-backdrop="static">
<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="extLinkModalLabel"></h4>
</div>
<div class="modal-body">
//Remote Page Content loads here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and JS
<script>
$(document).ready(function() {
$("#extLinkModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("datalink"));
});
});
</script>
The content of somepage.htm overflows out of the modal because your somepage.htm page is not responsive, and your modal have some fixed height and width. So try to make your page responsive using bootstrap classes and some additional css if needed.
So making somepage.htm page content responsive will solve both problems of content overflows out of the modal as well as scroll bar.
Hope it will help you!
On this example: HTML / CSS Popup div on text click
How can I make this load on the index page when they visit the site the first time. I don't want a button to click, I want this load automatically; and then have a close button when they read the content on the popup. Thanks in advance.
Hi you can do this using bootstrap model popup
for this include bootstrap css and js files and use below code
Your Html Code
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Intorduction</h4>
</div>
<div class="modal-body">
Body Text
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
then use this script
<script>
if (localStorage.getItem('showModal')!='yes')
{
localStorage.setItem('showModal','yes');
$('#myModal').modal('show');
}
</script>