如何在jQuery对话框中打开href链接？_Jquery_Jquery Ui_Jquery Ui Dialog

如何在jQuery对话框中打开href链接？

jquery jquery-ui

如何在jQuery对话框中打开href链接？,jquery,jquery-ui,jquery-ui-dialog,Jquery,Jquery Ui,Jquery Ui Dialog,好的，我有如下代码，可以在特定页面中使用div创建一个对话框： $('#modal').dialog({ autoOpen: false, width: 600, height: 450, modal: true, resizable: false, draggable: false, title: 'Enter Data', close: function() { $("#modal .entry_dat

好的，我有如下代码，可以在特定页面中使用div创建一个对话框：

    $('#modal').dialog({
    autoOpen: false,
    width: 600,
    height: 450,
    modal: true,
    resizable: false,
    draggable: false,
    title: 'Enter Data',
    close: function() { 
        $("#modal .entry_date").datepicker('hide');
    } 
 });

 $('.modal').click(function() {
    $('#modal').dialog('open');
 });

<script type="text/javascript">

    function tb_parseQuery(query) {
        var Params = {};
        if (!query) { return Params; }// return empty object
        var Pairs = query.split(/[;&]/);
        for (var i = 0; i < Pairs.length; i++) {
            var KeyVal = Pairs[i].split('=');
            if (!KeyVal || KeyVal.length != 2) { continue; }
            var key = unescape(KeyVal[0]);
            var val = unescape(KeyVal[1]);
            val = val.replace(/\+/g, ' ');
            Params[key] = val;
        }
        return Params;
    }
    $(document).ready(function () {
        $('a.uimodal').bind('click', function () {

        var $this = $(this);
        var url = $this.attr("href");



        var queryString = url.replace(/^[^\?]+\??/, '');
        var params = tb_parseQuery(queryString);
        TB_WIDTH = (params['width'] * 1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
        TB_HEIGHT = (params['height'] * 1) + 40 || $(document).height(); //defaults to 440 if no paramaters were added to URL
            TB_Title = (params['title']);



        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load(url);
            },
            height: TB_HEIGHT,
            width: TB_WIDTH,
            title: TB_Title
        });
        return false;
    });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="uimodal" href="Dialog.aspx?height=350&width=700&title=تست"> click</a>
    </div>
    </form>
</body>
</html>

一切正常。但是，现在我想做的是也能够在对话框窗口中打开一个链接。例如使用以下代码的内容：

<a href="/path/to/file.html" class="modal">Open Me!!</a>

$('#modal').load('/path/to/file.html').dialog('open');

<script type="text/javascript">

    function tb_parseQuery(query) {
        var Params = {};
        if (!query) { return Params; }// return empty object
        var Pairs = query.split(/[;&]/);
        for (var i = 0; i < Pairs.length; i++) {
            var KeyVal = Pairs[i].split('=');
            if (!KeyVal || KeyVal.length != 2) { continue; }
            var key = unescape(KeyVal[0]);
            var val = unescape(KeyVal[1]);
            val = val.replace(/\+/g, ' ');
            Params[key] = val;
        }
        return Params;
    }
    $(document).ready(function () {
        $('a.uimodal').bind('click', function () {

        var $this = $(this);
        var url = $this.attr("href");



        var queryString = url.replace(/^[^\?]+\??/, '');
        var params = tb_parseQuery(queryString);
        TB_WIDTH = (params['width'] * 1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
        TB_HEIGHT = (params['height'] * 1) + 40 || $(document).height(); //defaults to 440 if no paramaters were added to URL
            TB_Title = (params['title']);



        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load(url);
            },
            height: TB_HEIGHT,
            width: TB_WIDTH,
            title: TB_Title
        });
        return false;
    });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="uimodal" href="Dialog.aspx?height=350&width=700&title=تست"> click</a>
    </div>
    </form>
</body>
</html>

然而，在这种情况下，我们不能在javascript中硬编码路径，因为将有多个项目来自数据库

<script type="text/javascript">

    function tb_parseQuery(query) {
        var Params = {};
        if (!query) { return Params; }// return empty object
        var Pairs = query.split(/[;&]/);
        for (var i = 0; i < Pairs.length; i++) {
            var KeyVal = Pairs[i].split('=');
            if (!KeyVal || KeyVal.length != 2) { continue; }
            var key = unescape(KeyVal[0]);
            var val = unescape(KeyVal[1]);
            val = val.replace(/\+/g, ' ');
            Params[key] = val;
        }
        return Params;
    }
    $(document).ready(function () {
        $('a.uimodal').bind('click', function () {

        var $this = $(this);
        var url = $this.attr("href");



        var queryString = url.replace(/^[^\?]+\??/, '');
        var params = tb_parseQuery(queryString);
        TB_WIDTH = (params['width'] * 1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
        TB_HEIGHT = (params['height'] * 1) + 40 || $(document).height(); //defaults to 440 if no paramaters were added to URL
            TB_Title = (params['title']);



        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load(url);
            },
            height: TB_HEIGHT,
            width: TB_WIDTH,
            title: TB_Title
        });
        return false;
    });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="uimodal" href="Dialog.aspx?height=350&width=700&title=تست"> click</a>
    </div>
    </form>
</body>
</html>

在这一点上，我正在努力理解如何让它发挥作用。我也相信答案是显而易见的，我只是想让自己被StackOverflow这里的聪明人羞辱

<script type="text/javascript">

    function tb_parseQuery(query) {
        var Params = {};
        if (!query) { return Params; }// return empty object
        var Pairs = query.split(/[;&]/);
        for (var i = 0; i < Pairs.length; i++) {
            var KeyVal = Pairs[i].split('=');
            if (!KeyVal || KeyVal.length != 2) { continue; }
            var key = unescape(KeyVal[0]);
            var val = unescape(KeyVal[1]);
            val = val.replace(/\+/g, ' ');
            Params[key] = val;
        }
        return Params;
    }
    $(document).ready(function () {
        $('a.uimodal').bind('click', function () {

        var $this = $(this);
        var url = $this.attr("href");



        var queryString = url.replace(/^[^\?]+\??/, '');
        var params = tb_parseQuery(queryString);
        TB_WIDTH = (params['width'] * 1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
        TB_HEIGHT = (params['height'] * 1) + 40 || $(document).height(); //defaults to 440 if no paramaters were added to URL
            TB_Title = (params['title']);



        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load(url);
            },
            height: TB_HEIGHT,
            width: TB_WIDTH,
            title: TB_Title
        });
        return false;
    });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="uimodal" href="Dialog.aspx?height=350&width=700&title=تست"> click</a>
    </div>
    </form>
</body>
</html>

今天下午我已经挠头够久了，所以我的自我已经被抛弃了，希望有人能给我指出正确的方向，告诉我如何正确地编写代码。

你可以抓取href属性并加载它

$('.modal').click(function(e) {
    e.preventDefault();
    $('#modal').load(this.href).dialog('open');
});

<script type="text/javascript">

    function tb_parseQuery(query) {
        var Params = {};
        if (!query) { return Params; }// return empty object
        var Pairs = query.split(/[;&]/);
        for (var i = 0; i < Pairs.length; i++) {
            var KeyVal = Pairs[i].split('=');
            if (!KeyVal || KeyVal.length != 2) { continue; }
            var key = unescape(KeyVal[0]);
            var val = unescape(KeyVal[1]);
            val = val.replace(/\+/g, ' ');
            Params[key] = val;
        }
        return Params;
    }
    $(document).ready(function () {
        $('a.uimodal').bind('click', function () {

        var $this = $(this);
        var url = $this.attr("href");



        var queryString = url.replace(/^[^\?]+\??/, '');
        var params = tb_parseQuery(queryString);
        TB_WIDTH = (params['width'] * 1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
        TB_HEIGHT = (params['height'] * 1) + 40 || $(document).height(); //defaults to 440 if no paramaters were added to URL
            TB_Title = (params['title']);



        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load(url);
            },
            height: TB_HEIGHT,
            width: TB_WIDTH,
            title: TB_Title
        });
        return false;
    });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="uimodal" href="Dialog.aspx?height=350&width=700&title=تست"> click</a>
    </div>
    </form>
</body>
</html>

菲尔，你需要抓取

href

属性：

var link = $('#modal').attr('href');
$('#modal').load(href).dialog('open');

<script type="text/javascript">

    function tb_parseQuery(query) {
        var Params = {};
        if (!query) { return Params; }// return empty object
        var Pairs = query.split(/[;&]/);
        for (var i = 0; i < Pairs.length; i++) {
            var KeyVal = Pairs[i].split('=');
            if (!KeyVal || KeyVal.length != 2) { continue; }
            var key = unescape(KeyVal[0]);
            var val = unescape(KeyVal[1]);
            val = val.replace(/\+/g, ' ');
            Params[key] = val;
        }
        return Params;
    }
    $(document).ready(function () {
        $('a.uimodal').bind('click', function () {

        var $this = $(this);
        var url = $this.attr("href");



        var queryString = url.replace(/^[^\?]+\??/, '');
        var params = tb_parseQuery(queryString);
        TB_WIDTH = (params['width'] * 1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
        TB_HEIGHT = (params['height'] * 1) + 40 || $(document).height(); //defaults to 440 if no paramaters were added to URL
            TB_Title = (params['title']);



        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load(url);
            },
            height: TB_HEIGHT,
            width: TB_WIDTH,
            title: TB_Title
        });
        return false;
    });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="uimodal" href="Dialog.aspx?height=350&width=700&title=تست"> click</a>
    </div>
    </form>
</body>
</html>

在此代码对话框中，大小和标题在链接中声明

<script type="text/javascript">

    function tb_parseQuery(query) {
        var Params = {};
        if (!query) { return Params; }// return empty object
        var Pairs = query.split(/[;&]/);
        for (var i = 0; i < Pairs.length; i++) {
            var KeyVal = Pairs[i].split('=');
            if (!KeyVal || KeyVal.length != 2) { continue; }
            var key = unescape(KeyVal[0]);
            var val = unescape(KeyVal[1]);
            val = val.replace(/\+/g, ' ');
            Params[key] = val;
        }
        return Params;
    }
    $(document).ready(function () {
        $('a.uimodal').bind('click', function () {

        var $this = $(this);
        var url = $this.attr("href");



        var queryString = url.replace(/^[^\?]+\??/, '');
        var params = tb_parseQuery(queryString);
        TB_WIDTH = (params['width'] * 1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
        TB_HEIGHT = (params['height'] * 1) + 40 || $(document).height(); //defaults to 440 if no paramaters were added to URL
            TB_Title = (params['title']);



        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load(url);
            },
            height: TB_HEIGHT,
            width: TB_WIDTH,
            title: TB_Title
        });
        return false;
    });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="uimodal" href="Dialog.aspx?height=350&width=700&title=تست"> click</a>
    </div>
    </form>
</body>
</html>

<script type="text/javascript">

    function tb_parseQuery(query) {
        var Params = {};
        if (!query) { return Params; }// return empty object
        var Pairs = query.split(/[;&]/);
        for (var i = 0; i < Pairs.length; i++) {
            var KeyVal = Pairs[i].split('=');
            if (!KeyVal || KeyVal.length != 2) { continue; }
            var key = unescape(KeyVal[0]);
            var val = unescape(KeyVal[1]);
            val = val.replace(/\+/g, ' ');
            Params[key] = val;
        }
        return Params;
    }
    $(document).ready(function () {
        $('a.uimodal').bind('click', function () {

        var $this = $(this);
        var url = $this.attr("href");



        var queryString = url.replace(/^[^\?]+\??/, '');
        var params = tb_parseQuery(queryString);
        TB_WIDTH = (params['width'] * 1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
        TB_HEIGHT = (params['height'] * 1) + 40 || $(document).height(); //defaults to 440 if no paramaters were added to URL
            TB_Title = (params['title']);



        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load(url);
            },
            height: TB_HEIGHT,
            width: TB_WIDTH,
            title: TB_Title
        });
        return false;
    });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="uimodal" href="Dialog.aspx?height=350&width=700&title=تست"> click</a>
    </div>
    </form>
</body>
</html>

<script type="text/javascript">

    function tb_parseQuery(query) {
        var Params = {};
        if (!query) { return Params; }// return empty object
        var Pairs = query.split(/[;&]/);
        for (var i = 0; i < Pairs.length; i++) {
            var KeyVal = Pairs[i].split('=');
            if (!KeyVal || KeyVal.length != 2) { continue; }
            var key = unescape(KeyVal[0]);
            var val = unescape(KeyVal[1]);
            val = val.replace(/\+/g, ' ');
            Params[key] = val;
        }
        return Params;
    }
    $(document).ready(function () {
        $('a.uimodal').bind('click', function () {

        var $this = $(this);
        var url = $this.attr("href");



        var queryString = url.replace(/^[^\?]+\??/, '');
        var params = tb_parseQuery(queryString);
        TB_WIDTH = (params['width'] * 1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
        TB_HEIGHT = (params['height'] * 1) + 40 || $(document).height(); //defaults to 440 if no paramaters were added to URL
            TB_Title = (params['title']);



        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load(url);
            },
            height: TB_HEIGHT,
            width: TB_WIDTH,
            title: TB_Title
        });
        return false;
    });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="uimodal" href="Dialog.aspx?height=350&width=700&title=تست"> click</a>
    </div>
    </form>
</body>
</html>


函数tb_parseQuery（查询）{
var Params={}；
if（！query）{return Params；}//返回空对象
var Pairs=query.split（/[；&]/）；
对于（变量i=0；i

页面必须知道路径是什么，对吗？页面如何获取这些信息？当您得到这个答案时，那么在打开对话框之前使用“load”的方法与您所需要的非常接近。您忘了说您需要禁用锚标记以向服务器发送请求。通过

preventDefault

或

returnfalse停止浏览器上的传播这就成功了。我知道你可以通过某种方式获得href，但我尝试的一切都会打开链接，因为这不会阻止浏览器首先打开链接！非常非常感谢！！！