I'm trying to 'add a link' functionality to my site. For that I'm using Modal plugin from Twitter Boostrap JS. On the main page there's only the 'link' field to fill, when a user clicks 'add link' button, a modal pops up, and the user sees the complete form to fill: link, title, tags. However, I want the link field to be pre-filled with the value from the previous step. It's similar to what happens when you 'save a link' on delicious.com.
However, the problem is that when I insert a javascript inside the modal dialog, the modal dialog stops working. Any ideas how to get around this problem? Thank you very much!
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- The Modal Dialog -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-body">
<form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data'>
Peter
<script type="text/javascript">
var linkURL = $('#linkURL').val();
//document.write("<input type='text' class='label-inline' name='linkURL' id='wall-post' value=linkURL>");
document.write(linkURL);
</script>
<button type='submit' class='btn'>Add Link</button>
</form>
</div>
</div>
</div>
<div class="container">
<div class="wall-post">
<textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
<button data-controls-modal="modal-from-dom" data-backdrop="static" class="btn">Add Link</button>
</div>
</div>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap-modal.js"></script>
</body>
There's a couple of little things preventing your script from working Arman.
The first is you need to load your jquery and bootstrap scripts in the header. The browser interprets the page as it loads, and when the browser hits the bit that says $("#linkURL") it doesn't know what to do with it.
The second bit is you can only know the content that the user has entered into the LinkURL box, when they click the "Add Link" button. Therefore, you can only really populate the modal box after that.
Given this, you can leverage the Events that the model library presents to populate this for you.
If you put this all together, you get this :
<html>
<head>
<title>Example</title>
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/bootstrap-modal.js" type="text/javascript"></script>
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<script type="text/javascript">
$(document).ready(function(){
$('#modal-from-dom').bind('show',function(){
$(".modal-body").html($("#linkURL").val());
});
});
</script>
</head>
<body>
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
×
<h3>Add Link</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
Add Link
</div>
</div>
<textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Add Link</button>
</body>
</html>
Then you just need to modify the content a bit, and you should be right to go!
Related
I see other answers, but I still do not understand what initializing javascript means and how I am supposed to add the javascript part to my HTML page? If I want to include this modal in my HTML page:
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
I am told I need to initialize it first using this code:
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
If I add this (the javascript portion) to the end of the material.js, it has no effect. If I add it in the HTML page and wrap it around using like this:
<script>
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
</script>
You can use regular JavaScript to initialize it instead of the jQuery that you're using:
M.Modal.init(document.getElementById('modal1'));
You can put that code in a <script> tag or include a .js file, but make sure you do so below the modal <div> and the Materialize sources.
The full code could look something like this:
<!DOCTYPE html>
<html>
<head>
<title>Modal test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
<script>
M.Modal.init(document.getElementById('modal1'));
</script>
</html>
So, the the data-dismiss="modal" is not working for buttons that are added in my HTML, but is working for buttons that are added to the modal via JS inserting the button HTML. This makes me figure that there's something wrong with where/what order I am adding my scripting tags.
My scripting tags are in this order:
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/Shared/site.js"></script>
I tried putting them in the <head>. I moved them to be the last thing right before </body>. I moved them to be right before and right after the modal html.
UPDATE
Here's a simplified version of my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site-bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div id="Popup" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div id="PopupHeader">
<button type="button" id="PopupX" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 id="PopupTitle" class="modal-title floatLeft"></h4>
<div class="clear"></div>
</div>
<div class="modal-body bgColorWhite">
<div id="PopupContent">Test</div>
</div>
<div id="PopupButtons" class="modal-footer bgColorWhite">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/Shared/site.js"></script>
</body>
</html>
Another note:
If I add the "Close" button, aka the X, via JS, it works as well. It's having it already in the modal that causes issues.
Any suggestions?
I was able to figure out my issue. It was that in my own JS file, I wanted to add into every button click event, event.stopPropagation(); Since this was a method, and I did not want this added multiple times to the same button every time it was called, I would remove the previous click events, which was removing Bootstrap's dismiss click event.
So, if you have this same issue and you have all of Bootstrap's JS added correctly, check your own code to make sure you're not overwriting/removing events.
UPDATE
Just to clarify, event.stopPropagation() prevents data-dismiss from working.
if you put into your code (in some cases it makes sense):
$modal.off('click')
then it also results that the modal won't be closed because the event is blocked.
In that case you have to handle it yourself:
$modal
.on('click', '[data-dismiss="modal"]', function() {
$modal.modal('hide');
});
I am having trouble getting a modal to display. I am using bootstrap 3.0.3. When I click the button, the screen goes grey but doesn't popup the modal. The css and js files are in the same directory as the html file. I know this code works because I copy and pasted it from http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=activate-modals-via-javascript. So this makes me think that something is wrong with the way I declared my css and js files in the head. Any help would be much appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Twitter Bootstrap Modals</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$("#myModal").modal('show');
});
});
</script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
Launch Demo Modal
<!-- Modal HTML -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Confirmation</h3>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</body>
</html>
You use class .hide at that have styles:
.hide{
display: none!
}
These rule always hide block
Better solution would be
1. Add special class for this:
.hide-block{
display: none;
}
<div id="myModal" class="modal hide-block fade">
2.The second way is to use inline styles
<div id="myModal" class="modal fade" style="display: none">
but this is not so good as the first solution
I created a Simply Modal popup dialog which works fine if you click on
<a href='#' class='confirm'>Demo</a>
however how can I call this "confirm" css class from within Javascript. I have tried...
<script language="JavaScript" type="text/JavaScript">
$(".confirm").click();
** Also tried this to but no good... **
document.getElementsByTagName('body')[0].className = 'confirm';
</script>
But didn't work. I'm sure this is pretty easy to do but can't seem to get it.
Thanks,
Frank G.
*** HERE IS THE SCRIPT I AM USING ***********
SimpleModal Confirm Modal Dialog
<!-- Page styles -->
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<!-- Confirm CSS files -->
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<!-- JS files are loaded at the bottom of the page -->
</head>
<body>
<div id='container'>
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='confirm-dialog'>
<h3>Confirm Override</h3>
<p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of the <code>onShow</code> callback as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p>
<input type='button' name='confirm' class='confirm' value='Demo'/> or <a href='#' class='confirm'>Demo</a>
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm 123</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/confirm/header.gif' alt='' />
<img src='img/confirm/button.gif' alt='' />
</div>
</div>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>
<script type="text/javascript">
$('.confirm').dialog({modal:true});
$('.confirm').modal();
$(".confirm").click();
$(document).ready(function(){
$('.confirm').dialog({modal:true});
$('.confirm').modal();
$(".confirm").click();
});
</script>
</body>
</html>
maybe you can try this jquery solution:
$("style[type=text/css]").text('#import url("*.css");');
To call it on page load simply call it inside document ready
$(document).ready(function(){
$('#modal_div_id').modal(); // Id would be better (#confirm)
});
This will call it at the page load. Make sure you have only one class at the page named as confirm.
Documentation.
A fiddle here.
I've been freaking out for two days with this...
I've set up a page with the Bootstrap CSS, with the following code in the page head:
<link rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/jquery.js"></script>
In my body I have this:
<button class="btn btn-large btn-primary" data-toggle="modal" data-target="#modal-signin" data-backdrop="true" data-keyboard="true">Launch Modal</button>
<div id="modal-signin" class="modal hide fade">
<div class="modal-header">
×
<h2>Sign in <small>or sign up</small></h2>
</div>
<div class="modal-body">
<h3>Teste</h3>
</div>
</div>
In the Bootstrap docs this is what I have to do to get this working but when I click the button it doesn't do anything...
I don't know what the problem is...
I need urgent help
Thanks.
jQuery will need to be included first as the twitter bootstrap depends on it.
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/jquery.js"></script>
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/bootstrap-transition.js"></script>